圖像上的鏈接，圖像上的不透明懸停

Question

我有一張圖片，如果將鼠標懸停在圖片上，並使用CSS完成，我有一張圖片。

如果用戶將鼠標懸停在圖像上，我還會在圖像頂部顯示一個鏈接，以使鏈接顯示使用jQuery的Im。

但是，當我將鼠標懸停在顯示的圖像上時，我將鼠標懸停在圖像上時，整個不透明效果和鏈接在我將光標移動到鏈接上時表現不穩。

我的解釋是，這是因爲當我將光標放在鏈接上時，Im實際上不再在圖像上。但我如何解決這個最新的方式呢？當光標懸停在鏈接上時，讓鏈接正常運行並設置圖像的不透明度。

我的代碼如下所示： HTML

<div class="col-md-2 category-product"> 
    <img src="image1.png" data-img="product-image-1"> 
    <div class="category-product-overview"><a href="#">Overview</a></div> 
</div> 
<div class="col-md-2 category-product"> 
    <img src="image2.png" data-img="product-image-2"> 
    <div class="category-product-overview"><a href="#">Overview</a></div> 
</div> 

CSS

.category-product { 
    width: 205px; 
    background-color: #fff; 
    padding: 16px 0 0 0; 
    margin: 10px 10px 0 0; 
} 

.category-product-overview { 
    position: absolute; 
    z-index: 10; 
    display: none; 
    top: 35%; 
    bottom: 65%; 
    left: 29%; 
} 

.category-product-overview a { 
    padding: 9px 16px 9px 16px; 
    background-color: #41a5e0; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; /* future proofing */ 
    -khtml-border-radius: 3px; /* for old Konqueror browsers */ 
    color: #fff; 
} 

.category-product-overview a:hover { 
    color: #348dc1; 
    text-decoration: none; 
} 

.category-product img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto 
} 

.category-product img:hover { 
    opacity: 0.5; 
} 

jQuery的

$('div.category-product > img').hover(function() { 
    $(this).next('.category-product-overview').show(); //hover in 
}, function() { 
    $(this).next('.category-product-overview').hide(); //hover out 
}); 

Answer 1

變化

.category-product img:hover { 
    opacity: 0.5; 
} 

到

.category-product:hover img { 
    opacity: 0.5; 
} 

這樣的:hover附着在圖像和概述雙方的父母，所以也無所謂鼠標是一個結束，只要它的類別父裏面。

和JavaScript

$('.category-product').hover(function() { 
    $('.category-product-overview', this).show(); 
}, function() { 
    $('.category-product-overview', this).hide(); 
});