gpt4 book ai didi

css - 将一个 div 悬停在另一个 div 后面

转载 作者:太空宇宙 更新时间:2023-11-04 04:17:29 26 4
gpt4 key购买 nike

想象一下这种结构:

<div class="background">
<div class="object"></div>
</div>
<div class="foreground"></div>

我的前景完全覆盖了我的背景在我的 CSS 中,我想在悬停时更改对象属性(即 .object:hover{} )有没有办法在 CSS 中做到这一点,而无需将我的 object 移动到 foreground 或使用 js 中?

更新:根据要求更新我的 CSS。

.background { background:url('background.svg') no-repeat; }
.foreground { background:url('foreground.svg') no-repeat 50% 50%; }
.object {
position: absolute;
top:10px;
left:10px;
opacity:1;
}

.object:hover
{
opacity:0.5;
}

最佳答案

答案有点像。您可以使用兄弟选择器 (+),但您必须恢复 div 的顺序。

示例 CSS:

.background {
position: absolute;
width: 600px;
height: 400px;
background-color: red;
}

.foreground {
position: absolute;
width: 300px;
height: 200px;
left: 150px;
top: 100px;
background-color: green;
z-index: 1;
}

.object {
width: 600px;
height: 400px;
}

.foreground:hover + .background .object {
background-color: blue;
}

和 HTML:

<div class="foreground"></div>
<div class="background">
<div class="object"></div>
</div>

工作样本:http://jsfiddle.net/pBYwT/1/

关于css - 将一个 div 悬停在另一个 div 后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19683772/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com