wordpress 中的自定义 CSS：在图像悬停时，显示一个按钮答案

【问题标题】：Custom CSS in wordpress: on image hover, show a buttonwordpress 中的自定义 CSS：在图像悬停时，显示一个按钮
【发布时间】：2021-07-01 18:58:10
【问题描述】：

我正在尝试在悬停图像图像时使具有特定 css id 的按钮可见（也具有 css id）。我想通过向我的 Elementor/Wordpress 页面添加自定义 CSS 来做到这一点。起初，我只有一个图像，当它悬停在它上面时，它旁边会显示一个弹出文本。这是我最初使用的没有按钮的代码：

#img-b:hover {
    transform: scale(1.3);
    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
    }

#img-b:hover:after {
    z-index: -1;
  background-color: #FFFFFF;
    content: "example text";
    word-wrap: break-word;
    font-size: 14px;
    text-align: left;
    padding: 15px 50px 15px 15px;
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    top: 26px;
    bottom: 20px;
    right: 110px;
    left: -148px;
}

现在，我想包含一个按钮（带有 css id #button-b），它在将鼠标悬停在图像上后出现在文本下方的文本框中。我在 Elementor 中定制了这个按钮，在我希望它重新出现的位置给它一个绝对位置，并给它一个 css id (#button-b)。此外，它的 z-index 值更高（现在将其设置为 5）。

我尝试了所有不同的方法，例如：

#button-b {
display: none;
}

#img-b:hover #button-b {
display: block;
}

或者例如改变按钮的不透明度。该按钮将始终消失，但不会在悬停时重新出现。我认为出了点问题，因为无法从 #img-b:hover 访问按钮？在删除我为弹出文本框制作的代码（所以是#img-b:after 部分）时，我也尝试了同样的方法，但效果不佳。

有人知道如何解决这个问题吗？提前致谢！

【问题讨论】：

您能否用您的 HTML 示例更新您的问题。由于 CSS 规则依赖于 HTML 结构，因此很难为您提供答案。

标签： html css wordpress elementor

【解决方案1】：

我觉得最简单的方法是使用Elementor's html widget 并使用 html 代码构建悬停图像。例如检查这个： How To Create Image Hover Overlay Effects - W3Schools

您可以在文本下方放置一个<a> 元素，并使用填充和边框对其进行样式设置，使其看起来像一个按钮。

【讨论】：