使用css悬停增加div的不透明度

时间:2015-01-15 09:28:28

标签: css css3

我有两个不透明度小于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;
}

1 个答案:

答案 0 :(得分:1)

您正在:before的{​​{1}} psuedo元素上设置不透明度,但是您正在检测.melbourne-left-background状态并更改DOM元素的不透明度而不是伪造的。

因此,改变:

:hover

.melbourne-left-background:hover {
    opacity: 1.0;
}