我有两个不透明度小于1的div。当悬停时我想将不透明度增加到1,但似乎无法使其工作。不确定是否是因为我在css中的z-index。我需要z-index来防止整个div的不透明度降低。
这是html
<section class="events">
<div class="events-wrapper">
<h2>Select the session you would like to attend for more information</h2>
<div class="melbourne-left">
<div class="melbourne-left-background">
<h1>Melbourne</h1>
<h3>Sunday Jan 21st 2015</h3>
</div>
</div>
<div class="sydney-right">
<div class="sydney-right-background">
<h1>Sydney</h1>
<h3>Sunday Feb 1st 2015</h3>
</div>
</div>
</div>
</section>
这是&#39;墨尔本&#39;的div
.melbourne-left {
display: block;
float: left;
width: 44%;
clear: both;
margin-left: 5%
}
.melbourne-left-background {
position: relative;
z-index: 1;
min-height: 420px;
}
.melbourne-left-background::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://melbourne.jpg) center center;
opacity: .4;
width: 100%;
max-width: 855px;
background-repeat: no-repeat;
}
.melbourne-left-background:hover {
opacity: 1.0;
}
答案 0 :(得分:1)
您正在:before
的{{1}} psuedo元素上设置不透明度,但是您正在检测.melbourne-left-background
状态并更改DOM元素的不透明度而不是伪造的。
因此,改变:
:hover
要
.melbourne-left-background:hover {
opacity: 1.0;
}