Html 单个DIV元素悬停的多重效果

我正在尝试在一张图片悬停上获得多种效果，以尽可能少的代码获得最佳效果。注意：我根本不想要jquery！仅CSS（偶数3）

因此，我有一个图像，它将在悬停时改变，同时使所述图像下方的Div也改变背景图像（实际上是文本，我只是找不到改变文本的方法，所以我尝试了该图像），所有这些都使IMG标记上的悬停图像具有指向我想要的位置的链接

到目前为止，我成功地通过以下方式更改了图像，并在悬停图像上创建了链接：

CSS

HTML

现在，正如你们比我更有经验的人所看到的，我在IMG标签self-onmouseovered和out上有一个图像，以尝试避免CSS上的复杂情况，这是有效的：它变成了我需要的图像（LOGO-FB）并恢复到LOGO-TP-onmouseout，链接起作用。但是，它并没有像预期的那样在IMG标记（即A标记引用）上悬停时更改.container背景

---

那么，等着挨打：我做错了什么？使用FF 32浏览器。

Css不包含父导航选择器。。。只有后代和后续的西伯利亚语

由于

.container

div是

.image

div的sibling，因此可以将

：hover

伪设置为div，而不是锚定：

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

As

~

是一个通用的sibling选择器

更多信息请点击此处：

同时

如果html标记保持与您显示的相同，我的意思是，如果

.container

仍然是指向

.image

div的直接后缀，那么您还可以使用

---

这是因为.container不是锚标记的后代。不幸的是，a:hover与条件语句m不同，它是一个选择器。您的a标签内没有.container，因此无法使用。您可能需要研究javascript解决方案，例如document.getElementsById（“容器上的某些id”）.style=“background image:url（logo tp text.png）”；在onmousover和onmouseout中，您可以自由更改我的CSS/HTML。我在一篇类似的文章中有人这样做，在文本链接的右边改变一个正方形的背景颜色，在左边只使用CSS，所以我知道这是可能的。。。有什么想法吗？提供的答案非常适合这种情况。比添加内联javascript更干净，而且你不必让容器成为锚标记的一部分。。。据MDN称，它甚至与IE7+兼容。谢谢你，这很有效！我知道只需要找出如何在不破坏代码的情况下将图像徽标tp放入div本身，因为徽标tp文本仅通过悬停在图像的左侧（它在屏幕上居中…@AlbanLusitanae）显示，我建议您发布另一个问题来处理该特定问题，以免混淆主题。此外，如果可能的话，请记住，如果可能的话，始终提供一个是的兄弟姐妹和相邻的工作，仍然需要找出映像的包含，但这将更容易：D这适用于多个映像和单个容器，对吗？@LCSALAZAR会这样做，对此，这是我在站点上的第一个问题：）再次，谢谢你的回答

<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>

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

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