悬停被背景渐变覆盖

时间：2015-07-10 00:29:07

标签： css hover anchor

以下是行动中的代码：

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

这是菜单。我用渐变背景。当我删除渐变时，a：hover工作。但不知何故背景：渐变覆盖它并禁用它。

有什么想法吗？

#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-->

3 个答案:

答案 0 :(得分：2)

如何使用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/

答案 1 :(得分：2)

background-color无法处理:hover的原因是因为它落后于您的渐变。 From the W3C spec on background-image:

  

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

background-color与z-index: 0类似。 background-image 始终位于背景颜色之上。由于您已为渐变中的每个色标指定了颜色，因此:hover颜色均未通过。

相反，您必须在悬停时声明新的背景渐变。如果您希望背景颜色为全彩色，只需为0%和100%指定相同的颜色。

另外，作为旁注：使用背景渐变时，请使用background-image代替background。 background元素是所有其他背景属性的简写属性。您没有声明任何其他属性，因此请仅声明您正在使用的属性。

我已使用下面正确的CSS清理了您的示例。

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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-->
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

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

要解决此问题，只需更改整个background，而不仅仅是background-color：

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

http://jsfiddle.net/zswr71Lc/

相关问题
最新问题