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

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

1 个答案: