单DIV元素的多重影响悬停

我试图让一个图像悬停多重功效，让用最少的代码可能是最好的结果。注意：我根本不需要jquery！仅限CSS（甚至3）。单DIV元素的多重影响悬停

因此，我有一个图像会在悬停时发生变化，同时会导致图像下方的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.png" onmouseover="this.src='logo-fb.png';" onmouseout="this.src='logo-tp.png';"> 
    </a> 
</div> 

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

，因为你更多有经验的人比我所看到的，我有onmouseovered并开始尝试避免在CSS，这曾并发症的IMG标签的自我形象：它变成了我所需要的图像（LOGO-FB）和恢复ŧ o LOGO-TP onmouseout，链接正常。但是，在不改变.container背景上悬停预期的IMG标签（这是一个标记参考）

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

来源

2014-09-10 Alban Lusitanae

这是因为.container不是后代锚定标记 – 2014-09-10 16:22:01

不幸的是，a：hover并不像条件语句那样工作，它是一个选择器。标签内没有.container，因此无法工作。您可能需要寻找到一个JavaScript的解决方案，如document.getElementsById（“关于集装箱一些ID”）的风格=“背景图像：网址（标志-TP-text.png）”。在你的onmousover和相反inmouseout – 2014-09-10 16:23:11

你可以自由改变我的CSS/HTML。我曾有人在一个类似的帖子这样做是为了改变正方形的背景颜色右边的文本链接悬停在左侧用单独的CSS，所以我知道这是可能的...有什么想法？ – 2014-09-10 16:28:56

CSS不包含父导航选择......只有后代及以下sibilings。

由于.container DIV是sibiling到.image DIV，你可以在:hover伪到div设置，而不是到锚：

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

由于~是一般sibiling选择。

此处了解详情：MDN General sibiling selector

此外

如果HTML标记保持你表现出同样的，我的意思是，如果.container保持为立即跟着 sibiling到.image DIV，您也可以使用Adjacent Sibiling Selector

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

来源

2014-09-10 16:30:14 LcSalazar

SUHWEEET。比inline javascript清洁得多。这个像跨浏览器的支持是什么？ – 2014-09-10 16:32:17

几乎每个浏览器......根据MDN，它甚至是IE7 +兼容。 – LcSalazar 2014-09-10 16:35:11

嗨LCSALAZAR。谢谢你，它的作品！我知道只需要弄清楚如何将图像logo-tp放入div本身而不会造成代码崩溃，因为logo-tp-text只是通过悬停在图像的左侧（它在屏幕上居中显示。） – 2014-09-10 16:36:56

单DIV元素的多重影响悬停

回答

相关问题