悬停由背景梯度

Question

这里重写是在动作的代码：

http://jsfiddle.net/uop7dz7L/5/

这是菜单。我使用渐变背景。当我删除渐变，然后a：悬停起作用。但不知何故背景：渐变覆盖它并禁用它。

任何想法？

#headwrap { 
 
    border-top: 2px solid #F5FBFD; 
 
    border-radius: 4px; 
 
} 
 
#inheader { 
 
    padding-top: 30px; 
 
    width: 973px; 
 
    margin: 0px auto; 
 
} 
 
#inheader ul { 
 
    font-size: 0; 
 
    padding: 0 0 0 0px; 
 
    list-style-type: none; 
 
} 
 
#inheader a { 
 
    text-decoration: none; 
 
    text-align: center; 
 
    background: #ffffff; 
 
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%); 
 
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #ededed), color-stop(100%, #f7f7f7)); 
 
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%); 
 
    background: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%); 
 
    background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%); 
 
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0); 
 
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%); 
 
    display: inline-block; 
 
    font-family: 'open sans', sans-serif; 
 
    font-size: 14px; 
 
    height: 38px; 
 
    line-height: 38px; 
 
    color: #0088CB; 
 
    transition: color 0.4s ease 0s; 
 
    -webkit-transition: color 0.4s ease 0s; 
 
    padding: 0px 23px 0px 22px; 
 
    border-right: 1px solid #0088CB; 
 
} 
 
a#contactus { 
 
    padding: 0px 23px 0px 22px; 
 
    border-right: 0px; 
 
} 
 
div#inheader a:hover { 
 
    background-color: fuchsia; 
 
} 
 
#inheader li { 
 
    display: inline; 
 
} 
 
#nesmenu1 { 
 
/*width: 972px;*/ 
 
border-bottom: 1px solid #E3E8EB; 
 
border-left: 1px solid #E3E8EB; 
 
border-radius: 4px; 
 
} 
 
#nesmenu2 { 
 
border-top: 1px solid #ECF2F4; 
 
border-right: 1px solid #ECF2F4; 
 
border-bottom: 1px solid #CDD1D4; 
 
border-left: 1px solid #CDD1D4; 
 
border-radius: 4px; 
 
} 
 
#nesmenu3 { 
 
border-top: 1px solid #DCE0E3; 
 
border-right: 1px solid #DCE0E3; 
 
border-bottom: 1px solid #B1B4B6; 
 
border-left: 1px solid #B1B4B6; 
 
border-radius: 4px; 
 
} 
 
#nesmenu4 { 
 
border-bottom: 1px solid #F8F8F8; 
 
border-radius: 4px; 
 
}

<div id="headwrap"> 
 
    <div id="header"> 
 
    <div id="inheader"> 
 
     <div id="nesmenu1"> 
 
     <div id="nesmenu2"> 
 
      <div id="nesmenu3"> 
 
      <div id="nesmenu4"> 
 
       <ul> 
 
       <li><a href="#">HOME</a></li> 
 
       <li><a href="#">PRODUCTS</a></li> 
 
       <li><a href="#">SONIC TOOTHBRUSH</a></li> 
 
       <li><a href="#">SONIC TRAVEL</a></li> 
 
       <li><a href="#">SONIC PLUS</a></li> 
 
       <li><a href="#">ACCESSORIES</a></li> 
 
       <li><a id="contactus" href="#">CONTACT US</a></li> 
 
       </ul> 
 
      </div><!--nesmenu4--> 
 
      </div><!--nesmenu3--> 
 
     </div><!--nesmenu2--> 
 
     </div><!--nesmenu1--> 
 
    </div><!--inheader--> 
 
    </div><!--header--> 
 
</div><!--headwrap-->

Answer 1

如何使用background代替background-color;

div#inheader a:hover { 
    background: fuchsia; 
} 

甚至更​​好 - 如果你想保持渐变，设置新的渐变在这个div/id像紫红色的颜色;

background: linear-gradient(to bottom, fuchsia 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%); 

更改它取决于你如何想树荫吧..

http://jsfiddle.net/u5nt9h18/

Answer 2

当您使用background-color，你只能改变background属性的该属性。因为渐变不使用颜色，只是在背景颜色上显示渐变，所以更改background-color不会影响它们。

要解决它，只需改变整个background，而不是仅仅background-color：

div#inheader a:hover { 
    background: fuchsia; 
} 

http://jsfiddle.net/zswr71Lc/

Answer 3

为什么background-color不上:hover工作的原因是因为它是你的梯度后面。 From the W3C spec on background-image:

当设置背景图像时，作者还应该指定当图像不可用时将使用的背景颜色。 当图像可用时，它会呈现在背景颜色的顶部。（因此，颜色在图像的透明部分可见）。

background-color就像z-index: 0。该background-image总是奠定了在背景色上面。由于您已为渐变中的每个色标指定了颜色，因此您的颜色都不会穿透。

相反，你将不得不宣布悬停一个新的背景渐变。如果您希望背景颜色为全色，请简单说明0%和100%的相同颜色。

此外，作为旁注：使用背景渐变时，请使用background-image而不是background。 background元素是所有其他背景属性的简写属性。你没有声明任何其他属性，所以只声明你正在使用的属性。

我已经用下面的正确CSS清理了你的例子。

#headwrap { 
 
    border-top: 2px solid #F5FBFD; 
 
    border-radius: 4px; 
 
} 
 
#inheader { 
 
    padding-top: 30px; 
 
    width: 973px; 
 
    margin: 0px auto; 
 
} 
 
#inheader ul { 
 
    font-size: 0; 
 
    padding: 0 0 0 0px; 
 
    list-style-type: none; 
 
} 
 
#inheader a { 
 
    text-decoration: none; 
 
    text-align: center; 
 
    background-color: #ffffff; 
 
    background-image: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%); 
 
    background-image: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #ededed), color-stop(100%, #f7f7f7)); 
 
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%); 
 
    background-image: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%); 
 
    background-image: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%); 
 
    background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0); 
 
    background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%); 
 
    display: inline-block; 
 
    font-family: 'open sans', sans-serif; 
 
    font-size: 14px; 
 
    height: 38px; 
 
    line-height: 38px; 
 
    color: #0088CB; 
 
    -webkit-transition: color 0.4s ease 0s, background 0.1s ease-in; 
 
    transition: color 0.4s ease, background 0.1s ease-in; 
 
    padding: 0px 23px 0px 22px; 
 
    border-right: 1px solid #0088CB; 
 
} 
 
a#contactus { 
 
    padding: 0px 23px 0px 22px; 
 
    border-right: 0px; 
 
} 
 
div#inheader a:hover { 
 
    background-image: -moz-linear-gradient(top, fuchsia 0%, fuchsia 100%); 
 
    background-image: -webkit-gradient(left top, left bottom, color-stop(0%, fuchsia), color-stop(100%, fuchsia)); 
 
    background-image: -webkit-linear-gradient(top, fuchsia 0%, fuchsia 100%); 
 
    background-image: -o-linear-gradient(top, fuchsia 0%, fuchsia 100%); 
 
    background-image: -ms-linear-gradient(top, fuchsia 0%, fuchsia 100%); 
 
    background-image: linear-gradient(to bottom, fuchsia 0%, fuchsia 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='fuchsia', endColorstr='fuchsia', GradientType=0); 
 
    background-image: linear-gradient(to bottom, fuchsia 0%, fuchsia 100%); 
 
} 
 
#inheader li { 
 
    display: inline; 
 
} 
 
#nesmenu1 { 
 
    /*width: 972px;*/ 
 
    border-bottom: 1px solid #E3E8EB; 
 
    border-left: 1px solid #E3E8EB; 
 
    border-radius: 4px; 
 
} 
 
#nesmenu2 { 
 
    border-top: 1px solid #ECF2F4; 
 
    border-right: 1px solid #ECF2F4; 
 
    border-bottom: 1px solid #CDD1D4; 
 
    border-left: 1px solid #CDD1D4; 
 
    border-radius: 4px; 
 
} 
 
#nesmenu3 { 
 
    border-top: 1px solid #DCE0E3; 
 
    border-right: 1px solid #DCE0E3; 
 
    border-bottom: 1px solid #B1B4B6; 
 
    border-left: 1px solid #B1B4B6; 
 
    border-radius: 4px; 
 
} 
 
#nesmenu4 { 
 
    border-bottom: 1px solid #F8F8F8; 
 
    border-radius: 4px; 
 
}

<div id="headwrap"> 
 
    <div id="header"> 
 
    <div id="inheader"> 
 
     <div id="nesmenu1"> 
 
     <div id="nesmenu2"> 
 
      <div id="nesmenu3"> 
 
      <div id="nesmenu4"> 
 
       <ul> 
 
       <li><a href="#">HOME</a> 
 
       </li> 
 
       <li><a href="#">PRODUCTS</a> 
 
       </li> 
 
       <li><a href="#">SONIC TOOTHBRUSH</a> 
 
       </li> 
 
       <li><a href="#">SONIC TRAVEL</a> 
 
       </li> 
 
       <li><a href="#">SONIC PLUS</a> 
 
       </li> 
 
       <li><a href="#">ACCESSORIES</a> 
 
       </li> 
 
       <li><a id="contactus" href="#">CONTACT US</a> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      <!--nesmenu4--> 
 
      </div> 
 
      <!--nesmenu3--> 
 
     </div> 
 
     <!--nesmenu2--> 
 
     </div> 
 
     <!--nesmenu1--> 
 
    </div> 
 
    <!--inheader--> 
 
    </div> 
 
    <!--header--> 
 
</div> 
 
<!--headwrap-->