1 hover = 2 actions

HTML & CSS
1

Hello All,

I’m trying to do something, without JS just to see if it could be done. As of yet, no luck.

So I’m going to throw this against the wall to get some input, or be told how dumb I am. Either way if fine.

If you look at the code below, I have the UL(nav) and 4 divs. Each div is classed to correspond with an LI in the list.

Question is… Is it possible with CSS only, to say hover over the .about div and have the background colour change in the div as well as have the .about li get underlined at the same time.

<div id=“container”>
<ul>
<li class=“home”>Home</li>
<li class=“about”>About</li>
<li class=“like”>Like</li>
<li class=“dlike”>Don’t Like</li>
</ul>
<div class=“home”>
<p>This is the Home box</p>
</div>
<div class=“about”>
<p>This is the About box</p>
</div>
<div class=“like”>
<p>This is the Like box</p>
</div>
<div class=“dlike”>
<p>This is the Don’t Like box</p>
</div>

Thanks everyone…

2

Not ie6 but others yes if they are in the same container. So #container:hover .about {yada}

3

The problem with that Eric is that they will all highlight at the same time, when you hover on the parent div.

Question is… Is it possible with CSS only, to say hover over the .about div and have the background colour change in the div as well as have the .about li get underlined at the same time.
CSS is not capable of climbing back up the dom like that. You can use the adjacent sibling selector to target siblings of the same parent but those are not siblings. It could be done with javascript which would allow you to use your current html.

If you set up some convoluted html and nested the corresponding divs within the LI then you could pull it off.

For the sake of an example with CSS only it might look something like this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.2 arial,helvetica,sans-serif;
}
p {margin:10px;}

#container {
    width:50%;
    margin:0 auto;
    overflow:hidden;
    background:#EEF;
}
ul {
    margin:0;
    padding:0 30px;
    background:#EEE;
    position:relative;
}
li {
    display:block;
    width:100%;
    height:2em;
}
li a {
    position:absolute;
    left:30px;
    right:30px;
    top:auto;
    display:list-item;
    height:2em;
    line-height:2em;
    text-decoration:none;
}
li div {
    float:left;
    clear:left;
    width:100%;
    margin-bottom:10px;
    background:#FFF;
}
.home div {margin-top:9em;}

.home:hover div {background:red;}
.home:hover a {background:lime;}

.about:hover div {background:orange;}
.about:hover a {background:tan;}

.like:hover div {background:yellow;}
.like:hover a {background:pink;}

.dlike:hover div {background:lime;}
.dlike:hover a {background:cyan;}

li:hover a {text-decoration:underline}
</style>

</head>
<body>

<div id="container">
    <ul>
        <li class="home">
            <a href="#">Home</a>
            <div>
                <p>This is the Home box</p>
                <p>This is the Home box</p>
            </div>
        </li>
        <li class="about">
            <a href="#">About</a>
            <div>
                <p>This is the About box</p>
                <p>This is the About box</p>
            </div>    
        </li>
        <li class="like">
            <a href="#">Like</a>
            <div>
                <p>This is the Like box</p>
                <p>This is the Like box</p>
            </div> 
        </li>
        <li class="dlike">
            <a href="#">Don't Like</a>
            <div>
                <p>This is the Don't Like box</p>
                <p>This is the Don't Like box</p>
            </div>
        </li>
    </ul>    
</div>

</body>
</html>
4

Thanks guys…

I really appreciate the time taken by the people who read and reply to these silly little questions.

Again, thank you. I feel like a kid with a new toy, I’m gonna go play with it now.

Regards,
Tom