鼠标悬停在跨度上不起作用

Question

假设有这个html:

<a href="" class="hoverelement"><span>DOG</span></a>

我需要增加字符串的大小 "DOG" 所以我用这个 css:

.hoverelement span:hover {
  font-size:20px;
}

但这行不通？谁能帮帮我？

Answer 1

尝试为 a 元素提供 hover 选择器。

a.hoverelement:hover span {
   font-size: 20px;
}

Answer 2

改用这个：

.hoverelement:hover span {
    font-size: 20px;
}

Answer 3

您需要在跨度的css中添加!important，因为它可能会被它的父规则继承。

.hoverelement span:hover {
  font-size:20px !important;
}

<a href="" class="hoverelement"><span>DOG</span></a>

mouse hover on the span doesn't work