这种多重悬停效果只使用CSS实现吗?

Is this multiple hover effect possible using only CSS?

本文关键字：CSS 实现 悬停      更新时间：2023-09-26

谁能告诉我，如果这里描绘的悬停效果可能与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。

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

a:hover + .box{}

此外，它在IE 7及以下版本有问题，但你也可以使用一般的兄弟选择器:~

a:hover ~ .image {}

然而，你可以通过更具体地解决IE错误:

a:hover + .box + .image{}

演示

我认为你需要一个外部div容器，这三个元素应该在哪里，你想改变发生，然后你需要css的层次继承当鼠标悬停在这个外部div，像这样(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;
}

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

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

从技术角度来看，默认情况下只有链接和表单元素可以被聚焦，所以最好坚持使用这些元素，即使IE7+和其他浏览器可以为任何被悬停的元素设置样式。有些人不会或不会使用鼠标(还有智能手机)。一个简单的CSS规则就是:在使用:hover的地方总是使用:focus(或者在不可能的情况下考虑达到相同效果的最佳方法)

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

我是这么想的

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

这段代码使得您只需要将鼠标悬停在.buttondiv上。这是通过在.wrapdiv上设置一些简单的margin-top和height来实现的。

不幸的是，这不能仅使用css实现，因为您必须提前查看一个元素是否包含另一个元素(我认为伪选择器:contains-element或:contains曾经工作，但不再是css的一部分)。但是，使用jQuery的'。属性，并为目标添加类。

编辑:@bookcasey已经证明我错了

相关文章：