Question

我不明白为什么会这样做：

.button:active {
    position:relative;
    top: 2px;
    left:2px;
}

但这不起作用：

.button:hover { 
    font-size:17px;
}

当我使用id但它希望它激活所有按钮时它起作用：

#btnhome:hover{
    font-size:17px;
}

这样可以正常但是上课不行吗？我做错了什么？

Answer 1

使用id并确保某些事情与特异性有关，过度骑行，试试这个

Demo

Demo + !important

.button:hover { 
    font-size:17px !important; /* Actually you don't even need !important */
}

Answer 2

尝试：
.button *:hover { font-size:17px; }

Answer 3

您肯定使用 link 标记包含外部.css文件，其中定义了.button:hover {font-size:somethingelse !important;}。这就是为什么你不能改变它，除非再次使用！important。

Answer 4

这是特异性。该ID优先于伪造风格。您需要重新编写CSS以使其更通用，并且只将唯一值放在ID上或使用ID加上伪选择器。

我从ID中获取了常见的东西并将它们移动到了一个基地.button类：

.button{
    width: 84px;
    height: 46px;
    background-color:#000;
    border: none;
    color: white;    
    font-size:14px;
    font-weight:700;
}
.button:hover { 
     font-size:17px;
}

看看这个小提琴，看看它的实际效果：http://jsfiddle.net/kJfmR/

HTML CSS按钮悬停不会通过类工作

4 个答案: