Multiple effects on single DIV element hover

问题

I am trying to get multiple effects on a single image hover to allow the best outcome with the least code possible. Note: I do not want jquery at all! CSS only (even 3).

So I have an image which will change on hover and at the same time cause a Div below the said image to change the background image as well (which is actually text, I just couldn't find a way to change the text so I tried the image) and with it all having the hover image on the IMG tag to have a link to the place I want.

So far I managed to get the image changed and the links working on the hover image with this:

CSS

.container
{
    width: 1500px;
    height: 400px;
}

.image a:hover .container
{
    background-image: url('logo-tp-text.png');
}

HTML

<div class="image">
    <a href="http://www.google.com">
        <img src="logo-tp.png" onmouseover="this.src='logo-fb.png';" onmouseout="this.src='logo-tp.png';">
    </a>
</div>

<div class="container"></div>

Now, as you much more experienced people than me can see, I have the image on IMG tag self onmouseovered and out to try and avoid complications on the CSS, which worked: it changes into the image I need (LOGO-FB) and reverts to LOGO-TP onmouseout, with the link working. However, it is not changing the .container background as expected on hover on the IMG tag (which is the A tag reference)

So, waiting for the beating: what am I doing wrong? Using FF 32 browser.

回答1:

Css does not contains parent navigation selectors... Only descendant and following sibilings.

Since the .container div is a sibiling to the .image div, you could set the :hover pseudo to the div instead to the anchor:

.image:hover ~ .container {
     background-image: url('logo-tp-text.png');
}

As ~ is a general sibiling selector.

More info here: MDN General sibiling selector

Also

If the html markup stays the same as you showed, I mean, if the .container remains as a immediate followed sibiling to the .image div, you can also use an Adjacent Sibiling Selector

.image:hover + .container {
     background-image: url('logo-tp-text.png');
}

来源：https://stackoverflow.com/questions/25770409/multiple-effects-on-single-div-element-hover

标签

html

css

image

hover