HTML5/CSS3 hover error

[AlternativeWeb]

Why does this work, but when I add #container it no longer works?


Works just fine:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css"> 
stage2
{
display:none;
color:black;
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */  

}

.stage2:hover + stage2{
    display:inline;
} 
</style>

</head>
<body>

<a class="stage2" href="#">Hover over me!</a>

<stage2>this is the content for stage2</stage2>


</body>
</html>

No longer working due to #container

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css"> 
stage2
{
display:none;
color:black;
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */  

}

#container .stage2:hover + stage2{
    display:inline;
} 
</style>

</head>
<body>

<div id="container">
    <a class="stage2" href="#">Hover over me!</a>
</div>

<stage2>this is the content for stage2</stage2>


</body>
</html>

What am I doing wrong?

 

[soft2050]

Because in the second code, you are trying to select stage2 inside #container

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css"> 
stage2
{
display:none;
color:black;
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */  

}

#container .stage2:hover + stage2{
    display:inline;
} 
</style>

</head>
<body>

<div id="container">
    <a class="stage2" href="#">Hover over me!</a>

    <stage2>this is the content for stage2</stage2>
</div>


</body>
</html>

That works

The adjacent sibling selector matches only if both of them are from same parent element i.e. #container in this case

 

[AlternativeWeb]

Thanks for clearing that up for me, Soft!

I don't know how I missed that.. . sigh, need more Redbull -- haha!

---------- Post added at 02:10 PM ---------- Previous post was at 12:12 PM ----------

Maybe you or someone can help me out with another issue i'm having.

On rollover the text should popout and the image should change to a different one, but in the code below, the image doesn't change.

What what is the correct way to do this?

<head>

<style type="text/css"> 
stage2
{
display:none;
color:black;
width:100px;
height:100px;
}
.container {
    background-image: url(http://boallen.com/assets/images/randbitmap_true.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    height: 300px;
    width: 1000px;
}

.stage2:hover + .container {
    background-image: url(http://www.presort.com/wp-content/uploads/random-numbers.png);
}

.stage2:hover + stage2{
    display:inline;
} 
</style>

</head>
<body>


<div class="container">
    <a class="stage2" href="#">Hover over me!</a>
    <stage2>this is the content for stage2</stage2>
    
</div>


</body>
</html>

 

[soft2050]

Nope, you can't do that directly with CSS. You would have to use javascript side by side too: https://developer.mozilla.org/en/DOM/element.onmouseover

 

[AlternativeWeb]

Thanks for clearing that up for me.