懸停由背景梯度

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