图像上的链接，图像上的不透明悬停

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(); 
});