Javascript 这种多重悬停效果是否可能仅使用CSS？

有人能告诉我，如果悬停效果描述是可能的，只是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;
}

正如你所看到的，我正在努力解决这个问题，我可能正在尝试做一些没有任何意义的事情。我可以找到很多关于如何将这些东西应用到按钮本身的教程，但令人惊讶的是，我没有找到任何教示我如何做我想做的事情

如果有人能帮我改邪归正，我将不胜感激

---

谢谢

我认为您需要一个外部div容器，这三个元素应该在其中，您希望在其中发生更改，然后当您将鼠标悬停在这个外部div上时，您需要css中的分层继承，如下所示(http://jsfiddle.net/HerrSerker/ahJHb/)

---

不幸的是，仅使用css无法实现这一点，因为您必须提前查看一个元素是否包含另一个元素（伪选择器：contains element或：contains用于工作，但我认为它们不再是css的一部分）。但是，使用jQuery使用“.hover”属性并向目标添加类非常容易

---

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

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

使用相邻同级选择器：

+

a:hover+.box{}

此外，它在IE7及以下版本中存在问题，但您也可以使用通用同级选择器：

~

a:hover~.image{}

但是，您可以通过更具体的方式绕过IE漏洞：

a:hover+.box+.image{}

---

虽然这在CSS中是可能的，但我认为这样做是不明智的

这是一把使用锚元素的小提琴：

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

主要的问题是：为什么要隐藏内容？这不重要吗？为什么用户必须猜测他必须首先单击/悬停屏幕的某个区域？这有很多合法的用途（在CSS2.1和3:target和类似的版本中有很多可供使用），但你必须小心可用性（然后是可访问性）在我看来，可用性将受到影响：）

这是我想到的

HTML:

---

此代码使您只需将鼠标悬停在

.button

div上。这是通过

.wrap

div上的一些简单边距顶部和高度设置来实现的。

您可以发布HTML吗？我们是否应该假设鼠标悬停在按钮上时显示的任何图像和文本都具有相同的尺寸，或者可以是任意尺寸Nasion？@Madmartigan肯定会在今天晚些时候或明天发布html……没想到回复会这么快！Wow@Wex是的，请假设图像的尺寸相同（使用精灵时，它们的尺寸实际上是原来的两倍，然后再移动）@Madmartigan肯定会在今天晚些时候或明天发布html…只是在测试这个想法，没有意识到响应会这么快！这是一个相当笨拙的解决方案。您可以使用同级选择器并保存一些语义上无意义的标记。@Wex是的，请假设图像的维度相同（好吧，使用精灵，这样它们的大小实际上是原来的两倍，然后改变过来）。@bookcasey这是一个开始，也许有助于samosa了解他/她的CSSbetter@HerrSerker我同意知道我在做什么绝对不会有什么坏处：）感谢您的输入这是不可能的，如果图像位于悬停元素之前，因为您只有通用同级选择器，用于下一个同级，而不是FD或上一个同级。我使用负边距，您还可以向上移动

相对的
或
绝对的
定位，将其移动到您想要的位置。我想问题是什么在标记中稍微移动图像会显著影响其含义。我认为不会。如果使用
tabindex
attribute@HerrSerker正确（积极的价值观在论坛的回答页面、谷歌主页等形式中非常有用），但如果您不自己修复代码，则会出现很多问题：（（这是与其他团队合作时的实际观点）
<!-- 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;
}

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

    .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; }