有人可以告诉我,只有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;
}
正如你所看到的,我正在努力解决这个问题,而我可能正在尝试做一些没有任何意义的事情。我可以找到很多关于如何将这些东西应用到按钮本身的教程,但令人惊讶的是我没有找到任何告诉我如何做我想做的事情。
如果那里的任何人能够理顺我,那将是非常感激的!
由于
答案 0 :(得分:4)
您不需要任何内联样式,也不需要包装div。
使用相邻的兄弟选择器:+
a:hover + .box{}
此外,它在IE 7及更低版本中也存在问题,但您也可以使用常规兄弟选择器:~
a:hover ~ .image {}
但是,您可以通过更具体的方式解决IE错误:
a:hover + .box + .image{}
答案 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设置来实现。