悬停状态不正常

我很新的CSS，所以请去容易对我:-)悬停状态不正常

我想，当它盘旋在翻转按钮上的梯度，但悬停功能不当我测试时工作。

<head> 
<style type="text/css"> 

.button_new{ 
border:1px solid #fab32f; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
font-size:12px; 
font-family: arial, helvetica, sans-serif; 
padding: 0px 8px; 
text-decoration: none; 
display: inline-block; 
color: #a60201; 
-webkit-font-smoothing: antialiased; 
background-color: #fab32f; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#fccd78), to(#f8b030); 
background-image: -webkit-linear-gradient(top, #fccd78, #f8b030); 
background-image: -moz-linear-gradient(top, #fccd78, #f8b030); 
background-image: -ms-linear-gradient(top, #fccd78, #f8b030); 
background-image: -o-linear-gradient(top, #fccd78, #f8b030); 
background-image: linear-gradient(to bottom, #fccd78, #f8b030); 
} 

.button_new:hover{ 
border: 1px solid #ffa700; 
background-color: #ffa700; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#f8b030), to(#fccd78)); 
background-image: -webkit-linear-gradient(top, #f8b030, #fccd78); 
background-image: -moz-linear-gradient(top, #f8b030, #fccd78); 
background-image: -ms-linear-gradient(top, #f8b030, #fccd78); 
background-image: -o-linear-gradient(top, #f8b030, #fccd78); 
background-image: linear-gradient(to bottom, #f8b030, #fccd78); 
} 


</style></head> 
<body> 

<a class="button_new" href="#">Posters &nbsp;&nbsp;<span style="color:#fff; font-weight:bold; font-size:14px;">&gt;</span></a> 

</body>

在此先感谢您的帮助！

来源

2013-10-21 gem.liza

你的HTML。将范围中的'>'更改为'>'。 –

完成，谢谢！ –

这只是一个评论，这不是答案。 –

您的语法为-webkit-gradient不正确。删除这两条线和它的作品：

background-image: -webkit-gradient(linear, left top, left bottom, from(#fccd78), to(#f8b030); 

background-image: -webkit-gradient(linear, left top, left bottom, from(#f8b030), to(#fccd78));

Demonstration

来源

2013-10-21 16:26:56

完美而简单。非常感谢你@dystroy！ –

此更新你的CSS：是病态形成

.button_new{ 
    border:1px solid #fab32f; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    font-size:12px; 
    font-family: arial, helvetica, sans-serif; 
    padding: 0px 8px; 
    text-decoration: none; 
    display: inline-block; 
    color: #a60201; 
    -webkit-font-smoothing: antialiased; 
    background: #fccd78; /* Old browsers */ 
    background: -moz-linear-gradient(top, #fccd78 0%, #f8b030 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fccd78), color-stop(100%,#f8b030)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #fccd78 0%,#f8b030 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #fccd78 0%,#f8b030 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #fccd78 0%,#f8b030 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #fccd78 0%,#f8b030 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fccd78', endColorstr='#f8b030',GradientType=0); /* IE6-9 */} 

.button_new:hover { 
background: #f8b030; /* Old browsers */ 
    background: -moz-linear-gradient(top, #f8b030 0%, #fccd78 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8b030), color- stop(100%,#fccd78)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f8b030 0%,#fccd78 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f8b030 0%,#fccd78 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f8b030 0%,#fccd78 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #f8b030 0%,#fccd78 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8b030', endColorstr='#fccd78',GradientType=0); /* IE6-9 */ 

    }

来源

2013-10-21 16:33:47

悬停状态不正常

回答

相关问题