Chrome中的Css按钮悬停问题

-1

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

这里是当前的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; 
}

来源

2015-11-06 Dan

请张贴一些代码并描述问题以及预期的行为应该是什么。 –

寻求调试帮助的问题必须包括在问题本身中重现**所需的最短代码。**注意：请不要滥用代码块来解决此问题**。 –

抱歉。我编辑了这个问题 – Dan

我认为，你必须在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

来源

2015-11-06 12:46:02 Wolfgang

喜写这个CSS在你的CSS文件时，它会解决这个问题

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

来源

2015-11-06 12:47:17 Allen

，这解决了trans问题。但转出效果仍然一样 – Dan

我对悬停BTN类铬同样的问题，我固定的，加入这个类按钮

.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; 
    }

来源

2016-07-25 05:39:35 Gayan

Chrome中的Css按钮悬停问题

回答

相关问题