悬停改变不透明度

Question

我目前正在创建自己的网站并在 wordpress 上使用 siteorigin 页面构建器。问题是他们没有悬停选项，所以我创建了一个自定义 css 来对背景色产生悬停效果。当我将鼠标悬停在背景的特定 "div" 或 "child" 上时，它会以不同于其他背景的方式更改此背景的不透明度。这里有一张图片来演示这个问题。

hover problem

正如你所看到的，蓝色是不同的，相同的规则适用于名为“.featr”的背景的class。

有什么帮助吗？谢谢

Answer 1

悬停选择器必须跟在 class 之后，所以在这种情况下它应该是：

.featr:hover

而不是：

.featr :hover

是的，但是 post 如果您需要帮助，请查看所有代码。我认为你不需要过渡

回应下面的评论 所以你需要声明 background-color (.featr) 的开始，然后是结束状态 (.featr:hover)。过渡采用背景 css 并线性缓动半秒。您应该包括下面的所有过渡线，因为它对每个浏览器的作用不同。

.featr {
background:rgba(0,0,0,1);
-o-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-khtml-transition: background 0.5s linear;
-webkit-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
transition: background 0.5s linear;
}

.featr:hover {
background:rgba(0,0,0,0.5);
}

悬停改变不透明度

Hover change opacity

css

wordpress

widget

hover

siteorigin