將鼠標懸停在div上的圖像變暗，但不是另一個孩子的圖像

懸停時，我試圖改變主要父圖像的不透明度以使主圖像變暗，但我想以完全不透明的方式在其上顯示另一圖像。這是我的嘗試，但它不起作用。將鼠標懸停在div上的圖像變暗，但不是另一個孩子的圖像

<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

來源

2015-01-09 Omar

添加JS提琴演示該問題，請。而在這個過程中 - 刪除那些古老的過濾器 - IE8-現在真的死了。 '-webkit-transition'也一樣 - 它已經[現在已經有了前綴]（http://caniuse.com/#feat=css-transitions）。 – 2015-01-09 22:28:20

以及一些css vs標記在某種程度上是不同的，你的css中有'a.image：hover'，但是你的標記沒有'a'標記，或者任何標記上沒有'.image'類 – RGLSV 2015-01-09 22:36:29

抱歉，我更新了代碼。當我把它帶入堆棧溢出時，我搞砸了 – Omar 2015-01-09 22:45:18

見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; 
}

來源

2015-01-09 22:45:26 mikelt21

這裏是我的解決方案。儘管沒有變暗，但我相信你可以把它作爲@ 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

來源

2015-01-09 22:56:05

將鼠標懸停在div上的圖像變暗，但不是另一個孩子的圖像

回答

相關問題