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

我不明白为什么这个工作:

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

但是这行不通:

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

当我使用id时，它可以工作，但我希望它对所有按钮都激活:

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

这工作得很好，但与类它不会?我做错了什么?

使用id，它可以工作，所以肯定与特异性有关，超越骑行，试试这个

Demo + !important

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

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

肯定有一个外部的。css文件包含你通过使用链接标签，其中.button:hover {font-size:somethingelse !important;}被定义。这就是为什么你不能改变它，除非再次使用!important

这是专一性。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/

如果有人仍然面临同样的问题:

我有一个类似于上面的，我的代码是这样的:

<style>

.btto:hover{
   background-color: grey ;
   cursor: pointer;}
</style>
<body>
<button class="btto" style="color:white; 
            background-color:black;
            padding:4%;
            width:50%;
            border:none"> Buy Tickets </button>
</body>

我认为button inside body的background-color覆盖了one inside style我所做的是:

<style>
.btto{
        color:white; 
        background-color:black;
        padding:4%;
        width:50%;
        border:none;
    }
 .btto:hover{
   background-color: grey ;
   cursor: pointer;
    }
    </style>
<body>
<button class="btto">Buy Tickets</button> 
</body>

相关内容

最新更新

热门标签：