悬停时使div中的图像变暗，但不是另一个子图像答案

【问题标题】：Darken image in div on hover, but not another child image悬停时使div中的图像变暗，但不是另一个子图像
【发布时间】：2015-01-10 06:56:05
【问题描述】：

悬停时，我正在尝试更改主父级的不透明度以使主图像变暗，但我想在其上显示另一个完全不透明的图像。这是我尝试过的方法，但它不起作用。

  <div class="masonry-item">
  <div class="masonry-item1">

    <a href="#" class="image">
      <div class="caption">
        <h3><img src="blah" /></h3> <!-- DARKEN THIS -->
      </div>
       <img src="blah" /> <!-- KEEP FULL OPACITY -->
     </a>
 </div>
 </div>

我的CSS：

  .masonry-container .masonry-item .image:hover .caption {
   opacity: 1;

  }

 .masonry-container .masonry-item a.image:hover img {
  opacity: .2; /* this seems to darken everything, but when removed darkening doesn't work */

 }

 .masonry-container .masonry-item1:hover {
   background-color: rgba(222,222,222,.5);
   z-index:98;
 }

这是我正在尝试做的一个示例： http://screencast.com/t/7qDUmCJMNd

【问题讨论】：

请添加一个 JS fiddle 来演示该问题。在此期间 - 删除那些古老的filter 东西 - IE8 - 这些天真的死了。 -webkit-transition 也是如此 - 一直是 unprefixed for ages now。
还有一些css vs标记在某种程度上是不同的，你的css上有'a.image:hover'，但你的标记中没有'a'标签，或者'.image'任何标签上的类
对不起，我更新了代码。我把它带入堆栈溢出时搞砸了

标签： css hover

【解决方案1】：

你在寻找这样的东西吗？：

见JSFiddle

HTML：

<div class="masonry-item">
    <div class="masonry-item1">
        <div class="caption">
            <h3><img id="image1" src="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" /></h3> <!-- DARKEN THIS -->
        </div>
        <img id="image2" src="http://laurafranksblog.files.wordpress.com/2013/04/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" /> <!-- KEEP FULL OPACITY -->
    </div>
</div>

CSS：

.masonry-item1 {
    background-color: #000;
    position: relative;
    height: 500px;
}
.masonry-item1:hover #image1 {
    opacity: .2;
    transition: all 1s;
}

/* This is just to get the images to overlap, you don't need this if you're doing it another way */
#image1, #image2 {
    position: absolute;
}

【讨论】：

【解决方案2】：

这是我的解决方案。虽然没有变暗，但我相信您可以将其作为@mikelt21 的答案。

<div class="masonry-item">
    <img id="i1" src="https://cdn0.iconfinder.com/data/icons/business-and-finance-9/250/vector_265_07-01-128.png" />
    <img id="i2" src="https://cdn0.iconfinder.com/data/icons/business-and-finance-9/250/vector_265_20-01-128.png" />
</div>

<style>
img{
    position: absolute;
    top:0;
    left:0;
    transition: all 1s;
}
div:hover #i1{
    opacity:1;
}
div:hover #i2{
    opacity:0;
}
#i1{
    opacity:0;
}
#i1:hover{
    opacity:1;
}
</style>

Here is the example in action

【讨论】：