jquery - 图像上的链接，不透明度悬停在图像上

Question

我有一张图片，如果我将鼠标悬停在图片上，我会使用 CSS 来设置不透明度。

如果用户将鼠标悬停在图像上，我还会在图像顶部显示一个链接，以便使用 jQuery 显示链接。

但是，当我将鼠标悬停在链接上时，当我将鼠标悬停在图像上时，整个不透明效果和链接会在我将光标移到链接上时出现抖动。

我的解释是，发生这种情况是因为当我将光标放在链接上时，我实际上不再位于图像上。但是我该如何以最巧妙的方式解决这个问题呢？当我将光标放在链接上时，让链接正常运行并设置图像的不透明度。

我的代码如下所示: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();
});