Question

我对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>

提前感谢您的帮助！

Answer 1

-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

Answer 2

用这个更新你的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 */

  }

悬停状态不正常

2 个答案: