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

【问题标题】：Change text and image opacity in figure更改图中文本和图像的不透明度
【发布时间】：2019-03-28 16:00:45
【问题描述】：

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

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

$(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/

假设您从左侧接近文本，文本的不透明度会发生变化，但图像保持不变。我如何确保它们同时改变不透明度（悬停时）。

【问题讨论】：

标签： jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

请使用此 CSS 代码

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

【讨论】：

您希望图像和文本同时更改不透明度。这个锚标签 a 的 css 代码将包含图形标签，因此在图形悬停时，图像和文本将同时改变不透明度。

【解决方案3】：

这是由于 CSS

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

链接元素的面积大于图（默认情况下，应用了边距）。实际上改变的不是不透明度而是颜色

因此，要么在悬停时删除该规则，要么删除应用于 figure 元素的边距

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

【讨论】：

【解决方案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;
}

【讨论】：