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

【问题标题】：Is this multiple hover effect possible using only CSS?这种多重悬停效果是否可能仅使用 CSS？
【发布时间】：2012-01-07 11:50:38
【问题描述】：

有人可以告诉我here 所描绘的悬停效果是否可以仅使用 CSS 实现？如果我能弄明白的话，真的很想在我的网站上使用它（到目前为止还没有运气）。

我不是程序员，但过去曾使用过简单的技术，例如精灵、更改背景颜色和图像交换按钮。不幸的是，我不知道如何将这些更改应用于页面上的多个 other 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;
}

如您所见，我正在为此苦苦挣扎，而且我可能正在尝试做一些没有任何意义的事情。我可以找到很多关于如何将这些东西应用到按钮本身的教程，但令人惊讶的是，我没有找到任何东西告诉我如何做我想做的事情。

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

谢谢

【问题讨论】：

你能发布你的 HTML 吗？
我们应该假设鼠标悬停在按钮上时出现的任何图像和文本具有相同的尺寸，还是可以是任何尺寸？
@Madmartigan 肯定会在今天晚些时候或明天发布 html... 没想到回复会这么快！哇
@Wex 是的，请假设图像尺寸相同（使用精灵，因此它们实际上是两倍大小，然后移动）

标签： javascript css hover effect

【解决方案1】：

我认为您需要一个外部 div 容器，三个元素应该在哪里，您希望更改发生在哪里，然后当您将鼠标悬停在这个外部 div 上时，您需要 css 中的分层继承，就像这样，（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;
}

【讨论】：

@Madmartigan 肯定会在今天晚些时候或明天发布 html... 只是在测试这个想法，并没有意识到响应会这么快！哇
这是一个相当笨拙的解决方案。您可以只使用兄弟选择器并为自己节省一些语义上无意义的标记。
@Wex 是的，请假设图像的尺寸相同（使用精灵，所以它们实际上是两倍大小然后移动）。
@bookcasey 这是一个开始，也许有助于 samosa 更好地了解他/她的 CSS
@HerrSerker 我同意知道我在做什么肯定不会有什么坏处 :) 感谢您的意见

【解决方案2】：

不幸的是，这仅使用 css 是无法实现的，因为您必须向前看以查看一个元素是否包含另一个元素（我认为伪选择器 :contains-element 或 :contains 曾经可以工作，但不再是 css 的一部分）。然而，使用 jQuery 使用 '.hover' 属性并向目标添加类非常容易。

编辑：@bookcasey 证明我错了。

【讨论】：

【解决方案3】：

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

使用相邻兄弟选择器：+

a:hover + .box{}

另外，在IE 7及以下也有问题，不过你也可以使用通用的兄弟选择器：~

a:hover ~ .image {}

但是，您可以通过更具体地解决 IE 错误：

a:hover + .box + .image{}

Demo

【讨论】：

这是不可能的，如果图像在悬停元素之前，因为你只有通用的兄弟选择器，它用于下一个兄弟而不是 fdor 以前的兄弟
我使用了负边距，您也可以向上 relative 或 absolute 定位以将其移动到您想要的位置。我想问题是在标记中稍微移动图像是否会显着影响其含义。我认为它没有。

【解决方案4】：

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

这是一个使用锚元素的小提琴：http://jsfiddle.net/MS9hV/

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

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

【讨论】：

如果您使用tabindex 属性，您也许可以使元素具有焦点
@HerrSerker True（积极的价值观在论坛中的回答页面、谷歌主页等形式中非常有用），但如果您不自己修复代码，它会破坏很多:(（这是与其他团队合作时的实际 POV）

【解决方案5】：

Here 是我想出来的。

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 来实现的。

【讨论】：