对单个DIV元素悬停的多个效果 [英] Multiple effects on single DIV element hover

问题描述

我试图在单个图片上悬停多个效果，以允许最小的代码可能的最佳结果。注意：我不想要jquery！ CSS只有（甚至3）。

所以我有一个图像将改变悬停，同时导致所述图像下面的一个div更改背景图像为（实际上是文本，我只是不能找到一种方式来改变文本，所以我试图的图像），并与它所有在IMG标签上的悬停图像有一个链接到我想要的地方。

到目前为止，我设法使图像改变，并且悬停图像上的链接如下：

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.pngonmouseover =this.src ='logo-fb.png'; onmouseout =this.src ='logo-tp.png';> 
< / a> 
< / div> 
 
< div class =container>< / div> 
  

现在，因为你比我经验的人多得多，我有IMG标签自我的图像onmouseovered和出去尝试，避免并发症的CSS，这工作：它改变成我需要的图像（LOGO-FB），并恢复到LOGO-TP onmouseout，与链接工作。但是，它不会改变.container背景，悬停在IMG标签（这是A标签引用）上的预期。

所以，等待跳动：我做错了？使用FF 32浏览器。

解决方案

Css不包含父导航选择器...只有后代和后面的sibilings。

由于 .container div是 .image div的同级，您可以将：hover pseudo设置为div而不是锚点：

  .image：hover〜.container {
 background-image：url（'logo-tp-text.png'）; 
} 
  

As 〜

更多信息： MDN通用sibiling选择器

b
$ b

如果html标记保持与您所示的相同，我的意思是，如果 .container 保留为 / em> sibiling到 .image div中，您还可以使用 Adjacent Sibiling Selector

 。 image：hover + .container {
 background-image：url（'logo-tp-text.png'）; 
} 
  

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.

解决方案

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');
}

这篇关于对单个DIV元素悬停的多个效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！