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

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

我以小提琴为例：

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>

Answer 2

请使用此CSS代码

.text-center a {margin: 20px;display: block;}
.text-center figure {margin: 0;}

Answer 3

这是由于CSS

a:hover {
    color: rgb(84, 195, 241);
    text-decoration: none;
}

link元素的面积大于图形（默认情况下，该图形具有边距）。实际改变的不是透明度，而是颜色

因此，您可以在悬停时删除该规则，或者删除在figure元素上应用的边距

---

作为旁注，我建议不要将JS用于此类任务。您只能通过CSS来应用相同的效果。

Answer 4

此外，如果您想避免使用JQuery并仅使用CSS解决方案，请将CSS更改为：

* {
  margin: 0;
  padding: 0;
}

a {
  display: inline-block;
}

/* unvisited link */
a:link {
    color: rgb(0, 151, 224);
    text-decoration: none;
}

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

/* mouse over link */
a:hover {
    color: rgb(84, 195, 241);
    text-decoration: none;
    opacity: 0.75
}

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