CSS DIV 乘数效果的问题答案

【问题标题】：Problems with CSS DIV Multiplier EffectCSS DIV 乘数效果的问题
【发布时间】：2014-09-11 18:51:49
【问题描述】：

我在 SO 中搜索了这个问题的答案，但没有一个能完全满足我的需要。为了澄清，我需要一个没有 JQUERY 或 JAVASCRIPT 的 HTML CSS 答案。

所以在我的问题已经回答here 之后，我继续尝试放置一个图像悬停的相同效果，导致图像更改和不同的 div bkground 更改乘以 6，只是为了测试 .container DIV 是否已激活，带有以下内容（对不起 LCSALAZAR，我仍然没有理解 jsfiddle，未来会出现 :)）：

CSS

body
{
background: #000000 url('river.jpg') no-repeat fixed center;
}

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

.image-tp, .image-fb, .image-pin, .image-insta, .image-yt, .image-wp
{
float: left;
margin-left: 20px;
}

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

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

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

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

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

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

HTML

<body>

<div class="image-tp">
<a href="#">
<img src="logo-tp.png" onmouseover="this.src='logo-tp.png';" onmouseout="this.src='logo-tp.png';">
</a>
</div>

<div class="image-fb">
<a href="#">
<img src="logo-tp.png" onmouseover="this.src='logo-fb.png';" onmouseout="this.src='logo-tp.png';">
</a>
</div>

<div class="image-pin">
<a href="#">
<img src="logo-tp.png" onmouseover="this.src='logo-pin.png';" onmouseout="this.src='logo-tp.png';">
</a>
</div>

<div class="image-insta">
<a href="#">
<img src="logo-tp.png" onmouseover="this.src='logo-insta.png';" onmouseout="this.src='logo-tp.png';">
</a>
</div>

<div class="image-yt">
<a href="#">
<img src="logo-tp.png" onmouseover="this.src='logo-yt.png';" onmouseout="this.src='logo-tp.png';">
</a>
</div>

<div class="image-wp">
<a href="#">
<img src="logo-tp.png" onmouseover="this.src='logo-fb.png';" onmouseout="this.src='logo-tp.png';">
</a>
</div>

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

</body>
</html>

结果是我的 LAST 图像 DIV 影响了容器 DIV，但其他都没有。关于我缺少什么的任何建议？

提前致谢

阿尔班

【问题讨论】：

我认为您的意思是 Javascript，而不是 Java。
CSS 真的是 JAVA 吗？ :|如果是这样，是的，那么我的意思是 Javascript :)
好吧，当你编辑它时，我想你明白了。

标签： html css

【解决方案1】：

刚刚成功解决了这个问题 :) 我所做的是将 ADJACENT SIBLING 更改为 GENERAL SIBLING 选择器；供将来参考：

CSS

FIRST I HAD
.image-tp:hover + .container

NOW I HAVE
.image-tp:hover ~ .container

最好的问候路易斯·利马

【讨论】：