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

时间:2011-11-27 20:24:58

标签: javascript css hover effect

有人可以告诉我,只有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;
}

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

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

由于

5 个答案:

答案 0 :(得分:4)

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

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

a:hover + .box{}

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

a:hover ~ .image {}

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

a:hover + .box + .image{}

Demo

答案 1 :(得分:1)

我认为你需要一个外部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;
}

答案 2 :(得分:0)

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

编辑:@bookcasey证明我错了。

答案 3 :(得分:0)

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

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

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

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

答案 4 :(得分:0)

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