Need help with CSS3

Ok here is the html and css3

<div id="sitename">
    <div class="logo">
    <a class="home" href="#"><img src="logo.png" /></a>
    </div>
    <span class="someclass"><a class="home" href="#">Home</a></span>
    <span class="recharger">Some text</span>
    <span class="reload">Some other text</span>
</div>

.reload {
    position: absolute;
    top: 70px;
    left: 181px;
    width: 140px;
    -webkit-transition: opacity;
    -webkit-transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property: opacity;
    -moz-transition-duration: 400ms;
    -moz-transition-timing-function: ease-out;
    -o-transition-property: opacity;
    -o-transition-duration: 400ms;
    -o-timing-function: ease-out;
    transition: opacity;
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    opacity: 0;
    filter:alpha(opacity=0);
}
??? {
    opac开发者_如何学Pythonity: 1 !important;
    filter:alpha(opacity=100) !important;
}

I want to make the text in .reload appear when I hover on .home (2 places). What should I replace the ??? with ?

Thank you

With CSS you need to have the elements nested, e.g.:

<a class="home" ...><span class="reload">...</span></a>

Then you can use some CSS like this:

a.home:hover .reload { opacity: 1 !important; ... }

Otherwise you'll have to use JavaScript to sort this out. You can easily do this in jQuery:

$('a.home').hover(function () {
  $('.reload').css('opacity',1);
  $('.reload').css('filter','alpha(opacity=100)');
});

The closest to what you want is the general sibling combinator ~, but the elements (.home and .reload) have to be in the same nest level

so if your html was

<div id="sitename">
    <a class="logo home" href="#"><img src="logo.png" /></a>
    <a class="someclass home" href="#">Home</a>
    <span class="recharger">Some text</span>
    <span class="reload">Some other text</span>
</div>

the the appropriate css would be

.home:hover ~ .reload{
    opacity: 1 !important;
    filter:alpha(opacity=100) !important;
}

quoting the General sibling selector ^{MDC reference}

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.