Question

现在我的图像中有另一个图像绝对位于第一个图像的顶部。两张图片都在标签内。

我试图得到它，以便当我悬停在第一张图像的任何部分时，第一张图像从.5不透明变为全，第二张图像从0不透明变为全。

我已经能够对图像进行悬停工作，但第二张图像只会在我直接悬停在图像上时激活它的不透明度，而不是在我在其中任何一个上时突出显示它们。

<div class="of-volume image-column">
                    <a href="http://www.greatlengthshair.co.uk/hair-extensions/">
                        <img src="img/artistry-1-bg.jpg" alt="artisans of volume link" class="image-link">
                        <img src="img/artistry-1-icon.png" alt="" class="artisan-icon">
                    </a>
                </div>

/*//////////////////////////////////////
    IMAGE NAV
//////////////////////////////////////*/

.image-column {
    background-color: black;
    float: left;
    width: 33.3333%;
    position: relative;
    margin-bottom: -3px;
}

.image-column a {
    opacity: .5;
}

.image-column a:hover {
    opacity: 1;
}

.artisan-icon {
    position: absolute;
    margin-right: auto;
    margin-left: auto;
    right: 0;
    left: 0;
    bottom: 25px;
}

Answer 1

您混淆了大多数CSS规则。只需将所需效果附加到正确的悬停状态：

.image-link { opacity: 0.5; }
.artisan-icon { opacity: 0; }
a:hover .image-link { opacity: 1; }
a:hover .artistan-icon { opacity: 1; }

Answer 2

我将两个绝对图像放在一个相对div中，然后在此容器上设置了:hover选择器。

body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#container {
  position:relative;
  width:100%;
  height:200px;
}

img {
  position:absolute;
  top: 0px;
  left:0px;
  width:100%;
  height:200px;
  -webkit-transition: opacity 1s; /* Safari */
  transition: opacity 1s;
}

#pic1 {
  opacity:0.0;

}

#pic2 {
  opacity:0.5;
}

#container:hover #pic1, #container:hover #pic2  {
  opacity: 1;
}

<div id=container>
<img id=pic1 class=picture src="http://i.imgur.com/tMVGqP6.jpg" alt=img>
<img id=pic2 class=picture src="http://i.imgur.com/Goy7oBy.gif" alt=img>
</div>

徘徊出现并消失

2 个答案: