Question

我在使用按钮css的Chrome浏览器中遇到了有线问题。当我将这个按钮悬停在chrome（而不是firefox）中时，会产生意想不到的效果。

这是当前的css：

input[type="button"], .button, button {
    font-size: 100%;
    transition: none !important;
    text-transform: uppercase;
    padding: 5px 15px;
    line-height: 17px;
    border-radius: 0px;
    border: 3px solid #DDD;
    background: transparent none repeat scroll 0% 0%;
    color: #666;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

input[type="button"]:hover, .button:hover, button:hover {
    border-color: #8E7EBF;
    color: #FFF;
    background: #8E7EBF none repeat scroll 0% 0%;
}

a, span, i {
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

Answer 1

我认为你必须看看CSS的这些属性（theme.css第1058行）：

a:hover, span:hover, i:hover

您必须使用此synthax才能获得更好的兼容性：

a:hover, button:hover span, button:hover i

您可以在此处看到类似的问题：Button:hover not working in Firefox

Answer 2

您好，在您的css文件中写下这个css，它将解决问题

a:hover, span:hover, i:hover {
    -webkit-transition: initial;
    transition: initial;
}

Answer 3

我在悬停btn类的chrome上有同样的问题我修复了将这个类添加到按钮

.btn-reset-transform:hover {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -ms-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
        transform: none !important;
    }

Chrome中的Css按钮悬停问题

3 个答案: