jquery - 更改图中文本和图像的不透明度

Question

我有一个带有图标和文本的图形。单击时它们都应该重定向到某个页面。另外，当您将鼠标悬停在图像和文本上时，我想更改图像和文本的不透明度。但是我有一个问题...文本区域似乎比图像区域大。

这是我更改不透明度的代码:

$(document).ready(function() {
    $("#buyText").hover(function() {
        $('#buy').css('opacity', 0.75);
        $("#buyText").css('opacity', 0.75);
    }, function() {
        $('#buy').css('opacity', 1);
        $("#buyText").css('opacity', 1);
    });
});

    $(document).ready(function() {
        $("#buy").hover(function() {
            $('#buy').css('opacity', 0.75);
            $("#buyText").css('opacity', 0.75);
        }, function() {
            $('#buy').css('opacity', 1);
            $("#buyText").css('opacity', 1);
        });
    });

我创建了 fiddle 作为示例:

https://jsfiddle.net/Lk9af87t/

如果您从左侧接近文本，那么文本的不透明度会发生变化，但图像保持不变。我怎样才能确保它们同时改变不透明度(悬停时)。

Answer 1

问题是因为 #buy 和 #buyText 元素的大小不同，因此它们的 mouseenter 事件将在不同时间触发。如果您希望两者同时受到影响，请使用父元素，例如 a。

另请注意，您可以使用 CSS 使此逻辑更加简洁，并具有更好的性能:

a.buy-link:hover #buy,
a.buy-link:hover #buyText {
  opacity: 0.75;
}

a.buy-link:hover #buy,
a.buy-link:hover #buyText {
  opacity: 0.75;
}

a {
  text-decoration: none;
}

a:link,
a:visited,
a:active {
  color: rgb(0, 151, 224);
  text-decoration: none;
}

a:hover {
  color: rgb(84, 195, 241);
}

<div class="col text-center">
  <a href="#" style="text-decoration: none" class="buy-link">
    <figure>
      <img id="buy" src="https://banner2.kisspng.com/20180418/ixe/kisspng-agar-io-computer-icons-ubuntu-skin-buy-5ad7236a419759.6594585115240487462687.jpg" style="width: 100px; height: 100px">
      <figcaption id="buyText" style="margin-top: 10px"><b>BUY</b></figcaption>
    </figure>
  </a>
</div>