Question

有人可以告诉我，只有CSS可以显示here描述的悬停效果吗？如果我能搞清楚，那真的很想在我的网站上使用它（到目前为止没有运气）。

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

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

如果那里的任何人能够理顺我，那将是非常感激的！

由于

Answer 1

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

使用相邻的兄弟选择器：+

a:hover + .box{}

此外，它在IE 7及更低版本中也存在问题，但您也可以使用常规兄弟选择器：~

a:hover ~ .image {}

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

a:hover + .box + .image{}

Demo

Answer 2

我认为你需要一个外部div容器，其中三个元素应该在哪里，你希望发生更改，然后你需要在css上悬停在这个外部div上的层次继承，就像这样，（http：// jsfiddle达网络/ 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;
}

Answer 3

不幸的是，只有使用css才能实现这一点，因为你必须向前看，看看一个元素是否包含另一个元素（伪选择器：contains-element或：包含用于工作我认为但不再是css的一部分）。然而，jQuery很容易使用'.hover'属性并向目标添加类。

编辑：@bookcasey证明我错了。

Answer 4

虽然这在CSS中是可行的，但我认为这样做是不可取的。

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

从技术POV中，默认情况下只能聚焦链接和表单元素，因此即使IE7 +和其他元素可以设置任何正在悬停的元素，也最好坚持使用这些元素。有些人不能/不能使用鼠标（还有智能手机）。总是使用一个简单的CSS规则：无论你在哪里使用焦点：悬停（或考虑如果不可能的话，达到相同效果的最佳方法）

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

Answer 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设置来实现。

仅使用CSS可以实现多重悬停效果吗？

5 个答案: