Friday, October 17, 2008

Hovering and Changing Multiple CSS Subelements to Different Background Colors Simulatneously

Here is an example of highlighting multiple subelements with different background colors using CSS only. This should work in most recent browsers: Copy and paste this HTML into a new text file and open in your browser:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <title>Test Page</title>
            <style type="text/css">
               /** clear browser defaults **/
      * {
         margin: 0;
         padding: 0;
         border: 0;
         font-family: fantasy;
         font-size: 1em;
         font-weight: normal;
         font-style: normal;
         text-decoration: none;
       }

                ul.itemSet {
       margin: 0px 0px 0px 15px;
       padding: 0px 0px 0px 0px;
    }
    
    ul.itemSet li {
     list-style: none;
    }

    ul.item {
       margin: 7px 0px 14px 0px;
       padding: 0px 0px 0px 0px;
       border-bottom: solid 1px #999;
       display: block;
    }

    ul.itemSet li :hover li.itemHeader {
       background-color: #d4eac9;
    }

    ul.itemSet li :hover {
       background-color: #e7eee1;
    }

    ul.itemSet li li.itemHeader :hover {
       background-color: #d4eac9;
    }

    ul.itemSet li {
       width:99.6%;
    }

    li.itemHeader {
       background-color: #e7eee1;
       margin: 0px 0px 0px 0px;
       padding: 0px 3px 0px 3px;
       list-style: none;
       width: 100%;
       display: block;
       border-top: solid 1px #999;
    }

    li.itemHeader a {
       margin: 0px 0px 0px 0px;
       padding: 4px 0px 3px 0px;
       display: block;
    }

    div.itemHeaderTitleContainer {
       float: left;
       margin: 0px 0px 0px 0px;
       padding: 0px 0px 0px 0px;
       width: 87%;
    }
    
    div.itemHeaderTitleContainer a {
       display: block;
    }

    div.itemImgContainer {
       float: right;
    }
    
    img.itemImg {
     float: right;
     height: 1em;
     width: 3em;
    }

    li.itemBody {
       margin: 0px 0px 0px 0px;
       padding: 0px 3px 0px 3px;
       list-style: none;
       width: 100%;
       display: block;
    }

    li.itemBody a {
       margin: 0px 0px 0px 0px;
       padding: 13px 0px 7px 0px;
       display: block;
    }

            </style>
        </meta>
    </head>

    <body>
        <div class="container">
            <div class="items">
                <div id="itemsPrevious">
                    <ul class="itemSet">
                        <li>
                            <ul class="item">
                                <li class="itemHeader">
                                    <div class="itemHeaderTitleContainer">
                                        <a href="http://www.w3.org/">Header 1</a>
                                    </div>
                                    <div class="itemImgContainer">
                                        <a href="http://www.w3.org/">
                                            <img src="http://www.w3.org/Icons/w3c_home" alt="W3C" class="itemImg"/>
                                        </a>
                                    </div>
                                    <div style="clear: both;" />
                                </li>
                                <li class="itemBody">
                                    <a href="http://www.w3.org/">Body a</a>
                                </li>
                            </ul>
                            <ul class="item">
                                <li class="itemHeader">
                                    <div class="itemHeaderTitleContainer">
                                        <a href="http://www.w3.org/">Header 2</a>
                                    </div>
                                    <div class="itemImgContainer">
                                        <a href="http://www.w3.org/">
                                            <img src="http://www.w3.org/Icons/w3c_home" alt="W3C" class="itemImg"/>
                                        </a>
                                    </div>
                                    <div style="clear: both;" />
                                </li>
                                <li class="itemBody">
                                    <a href="http://www.w3.org/">Body b</a>
                                </li>
                            </ul>
                            <ul class="item">
                                <li class="itemHeader">
                                    <div class="itemHeaderTitleContainer">
                                        <a href="http://www.w3.org/">Header 3</a>
                                    </div>
                                    <div class="itemImgContainer">
                                        <a href="http://www.w3.org/">
                                            <img src="http://www.w3.org/Icons/w3c_home" alt="W3C" class="itemImg"/>
                                        </a>
                                    </div>
                                    <div style="clear: both;" />
                                </li>
                                <li class="itemBody">
                                    <a href="http://www.w3.org/">Body c</a>
                                </li>
                            </ul>
                            <ul class="item">
                                <li class="itemHeader">
                                    <div class="itemHeaderTitleContainer">
                                        <a href="http://www.w3.org/">Header 4</a>
                                    </div>
                                    <div class="itemImgContainer">
                                        <a href="http://www.w3.org/">
                                            <img src="http://www.w3.org/Icons/w3c_home" alt="W3C" class="itemImg"/>
                                        </a>
                                    </div>
                                    <div style="clear: both;" />
                                </li>
                                <li class="itemBody">
                                    <a href="http://www.w3.org/">Body d</a>
                                </li>
                            </ul>
                            <ul class="item">
                                <li class="itemHeader">
                                    <div class="itemHeaderTitleContainer">
                                        <a href="http://www.w3.org/">Header 5</a>
                                    </div>
                                    <div class="itemImgContainer">
                                        <a href="http://www.w3.org/">
                                            <img src="http://www.w3.org/Icons/w3c_home" alt="W3C" class="itemImg"/>
                                        </a>
                                    </div>
                                    <div style="clear: both;" />
                                </li>
                                <li class="itemBody">
                                    <a href="http://www.w3.org/">Body e</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

No comments: