这个多重悬停效果是否仅可以使用 CSS 实现？

Question

请问这个链接中所示的悬停效果是否只能通过CSS实现？如果可以，我想在我的网站上使用它（目前还没有成功）。

虽然我不是程序员，但我以前使用过简单的技术，例如精灵、更改背景颜色和图像交换来制作按钮。不幸的是，我不知道如何将这些更改应用于页面上的多个其他div，同时悬停在该按钮上:(

正如在样例中所看到的那样，当用户悬停在按钮上时，按钮上方的图像“出现”/更改，按钮的背景颜色以及按钮下方的div的背景颜色都会发生变化。

有人告诉我可以为所有3个类采用以下解决方案，然后在按钮和图像的背景精灵（以及按钮下方div的宽度）上使用一些内联样式。也许我没有理解他们的意思，因为当我尝试时，悬停属性并没有传递到子类...

.button, .imageAbove, .divBelow {
    background-color: #CCCCCC;
    background-position: left top;
    background-repeat: no-repeat;
    width: 160px;
    height: 40px;
}

.button:hover, .button:hover .imageAbove, .button:hover .divBelow {
    background-color: #FFFFFF;
    background-position: 0 -40px;
}

你们可以看到，我现在很苦恼，可能是因为我试图做一些没有意义的事情。我可以找到很多关于如何将这些东西应用于按钮本身的教程，但令人惊讶的是，我没有找到任何展示如何实现我想要达到的效果的内容。

如果有人能帮我解决问题，我将不胜感激！

谢谢

- samosa

---

请发一下你的HTML代码好吗？ - Wesley Murch

我们应该假设当鼠标悬停在按钮上时出现的任何图像和文本具有相同的尺寸，还是它们可以是任何尺寸？ - Wex

@Madmartigan今天或明天肯定会发布HTML...没想到回复这么快！哇 - samosa

@Wex 好的，请假设这些图片将具有相同的尺寸（我们使用精灵图，实际上它们会是两倍大小，然后移位）。 - samosa

Answer 1

您不需要任何内联样式，也不需要包装div。

使用相邻兄弟选择器：+ a:hover + .box{} 此外，在IE 7及以下版本中存在问题，但您也可以使用通用兄弟选择器：~ a:hover ~ .image {} 但是，您可以通过更具体的方法来解决IE错误： a:hover + .box + .image{} 演示： Demo

- bookcasey

---

如果图像在悬停元素之前，这将是不可能的，因为您只有一般兄弟选择器，它是用于下一个兄弟而不是上一个兄弟。 - yunzen

我使用了负边距，你也可以使用 relative 或 absolute 定位来将其移动到想要的位置。我猜问题是，在标记中稍微移动图像是否会显著影响其含义。我认为它不会。 - bookcasey

Answer 2

我认为你需要一个外部 div 容器，其中应该包含三个元素，你希望在这里进行更改。然后，在 CSS 中悬停在此外部 div 上时，你需要使用层次继承，就像这样（http://jsfiddle.net/HerrSerker/ahJHb/）。

<!-- HTML -->
<div class="outer">
    <div class="inner1">
    </div>
    <div class="inner2">
    </div>
    <div class="inner3">
    </div>
</div>

---

/* CSS */

div.outer {
    width: 100px;
}
div.outer div.inner1 {
    height: 20px;
    width: 50px;
}

div.outer div.inner2 {
    height: 20px;
    width: 100px;
    background: yellow
}

div.outer div.inner3 {
    height: 20px;
    width: 80px;
}

div.outer:hover div.inner1 {
    background: url(http://lorempixel.com/50/20)
}

div.outer:hover div.inner2 {
    background: gray;
}

div.outer:hover div.inner3 {
    background: gray;
}

- yunzen

---

@Madmartigan今天或明天肯定会发布HTML...只是在测试这个想法，没有意识到反应会这么快！哇 - samosa

这是一个相当笨重的解决方案。你可以使用兄弟选择器，避免一些语义上无意义的标记，从而简化代码。 - bookcasey

@Wex 是的，请假设图像将具有相同的尺寸（我们使用精灵，所以它们实际上会是双倍大小，然后移动）。 - samosa

@bookcasey 这是一个开始，也许能帮助samosa更好地了解他/她的CSS。 - yunzen

@HerrSerker 我同意，了解自己在做什么肯定是有好处的 :) 感谢您的建议。 - samosa

Answer 3

很遗憾，仅使用CSS无法实现此目标，因为您必须向前查看以查看元素是否包含另一个元素（伪选择器：contains-element或：contains曾经有效，但不再是CSS的一部分）。然而，使用jQuery的'.hover'属性并向目标添加类很容易实现。

编辑：@bookcasey已经证明我错了。

- Godwin

Answer 4

虽然在CSS中这是可能的，但我认为不建议这样做。

这里有一个使用锚点元素的fiddle：http://jsfiddle.net/MS9hV/

从技术角度来看，默认情况下只有链接和表单元素可以被聚焦，因此最好坚持使用这些元素，即使IE7+和其他浏览器可以样式化任何被悬停的元素。有些人不能/不使用鼠标（还有智能手机）。一个简单的CSS规则是无论何时使用:hover，始终使用:focus（或者如果不可能，考虑实现相同效果的最佳方法）

主要问题是：为什么要隐藏内容？它不重要吗？为什么用户必须猜测他必须首先点击/悬停屏幕的某个区域？这方面有合法的用途（在CSS2.1和3 :target等方面有很多可玩的东西），但您必须注意可用性（然后是可访问性）。在我看来，可用性将会受到影响 :)

- FelipeAls

---

如果您使用tabindex属性，您可能可以使元素可聚焦。 - yunzen

@HerrSerker 真的没错（在像论坛回答页面、Google首页等表单中很好），但如果你不自己修复代码，那么它会出现很多问题 :(（这是从与其他团队合作的实际角度考虑的） - FelipeAls

Answer 5

这里是我想出来的东西。

HTML：

<div class="wrap">
    <div class="image"></div>
    <div class="button"></div>
    <div class="caption"></div>
</div>

CSS：

    .wrap { 
height:30px;
width:200px;
margin-top:30px; }

.image {
width:200px;
height:30px;
background-color:red;
display:none;
position:absolute;
margin-top:-30px; }

.button { 
width:200px;
height:30px;
background-color:blue; }

.caption { 
width:300px;
height:30px;
background-color:green;
display:none; }

.wrap:hover > * { display:block; }

这段代码让你只需要将光标悬停在 .button div 上方。通过在 .wrap div 上设置一些简单的 margin-top 和 height 属性来实现这一目的。

- Purag