Question

我在CSS中设置了悬停效果，但似乎没有效果。我做错了什么？

＆＃13;

.button_link {
  display: inline-block;
  border: solid black 2px;
  border-radius: 15px;
  background-color: #ddf;
  padding: 10px;
  text-decoration: none;
}

.button_link#hover {
  color: orange;
  background-color: #fff;
}

＆＃13;

<div><a class="button_link" href="http://example.com">Return to example.com</a></div>
<div class="button_link">aa</div>

＆＃13;

Answer 1

#悬停需要为:hover

那应该解决它

Answer 2

它无法正常工作，因为您已将选择器编写为：

.button_link#hover,

哪个元素的选择器的类button_link和id的{{1}};而你想用hover伪类来定位类button_link的元素，因此：

:hover

.button_link:hover

.button_link {
  display: inline-block;
  border: solid black 2px;
  border-radius: 15px;
  background-color: #ddf;
  padding: 10px;
  text-decoration: none;
}

.button_link:hover {
  color: orange;
  background-color: #fff;
}

参考：

CSS Selectors Level 3。

Answer 3

因为你需要写：

.button_link:hover {}

Answer 4

        .button_link {
                display: inline-block;
                border: solid black 2px;
                border-radius: 15px;
                background-color: #ddf;
                padding: 10px;
                text-decoration: none;
        }

        .button_link:hover {
                color: orange;
                background-color: #fff;
        }

<!DOCTYPE html>
<html>
<div><a class="button_link" href="http://example.com">Return to example.com</a></div>
<div class="button_link">aa</div>
</html>

您好，您应该将 button_link #hover 更改为 button_link：hover 。快乐的编码！

参考： CSS伪类

https://www.w3schools.com/css/css_pseudo_classes.asp

为什么悬停效果在CSS中不起作用？

4 个答案: