mouseover background「highlight」covering text

我試圖做一個導航欄，當你將鼠標懸停在背景上時，它會突出顯示，但是當我這樣做時，文本也變得高亮顯示並且不再可見（幾乎不可見）。mouseover background「highlight」covering text

這是我目前的HTML和CSS：

<header> 
    <img id="logoimg" src = "./images/home.jpg"> 
    <ul class="top-nav"> 
      <li><a href=''>Home</a></li> 
     <li><a href=''>About Us</a></li> 
     <li><a href=''>Products</a></li> 
    </ul> 
c</header> 

.top-nav { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    background: #296E9A; 
    border-radius: 5px; 
} 

.top-nav li { 
    display: inline-block; 
    font-size: 14px; 
    padding: 0; 
    margin: 0; 
    width: 100px; 
    background: #296E9A; 
    text-align: center; 
    border-radius: 5px; 
} 

.top-nav a { 
    line-height: 200%; 
    color: #FFF; 
    text-decoration: none; 
    display: block; 
    font-weight: bold; 
} 

.top-nav a:hover { 
    background: #000; 
    border-radius: 5px; 
    opacity: 0.05; 
}

來源

2014-01-17 user2243357

您在a:hover CSS具有0.05的不透明度，這是造成該文本是幾乎不可見。

.top-nav a:hover { 
    border-radius: 5px; 
    opacity: 0.05; /* remove this */ 

    background: rgb(36, 105, 147); /* fallback for IE8 support */ 
    background: rgba(0,0,0,0.05); /* add this for highlighting */ 
}

刪除opacity屬性，當你將鼠標懸停在導航鏈接的文字應該會出現。

添加background: rgba()以設置具有alpha透明度的背景顏色（僅影響背景，而不影響文本或任何子節點）。

另外請記住，rgba（）支持現代瀏覽器，但缺乏對IE8及更低版本的支持。您必須將rgb()或任何其他顏色值應用於兼容性支持。

小提琴：http://jsfiddle.net/3yf2Q/2/

感謝@setek :)

來源

2014-01-17 02:37:48

值得注意的是，OP可能不希望突出顯示背景顏色爲黑色，而只是稍微偏深一點的藍色。將'background'屬性改爲：'background：rgb（36，105，147）;背景：rgba（0,0,0,0.05）;'像這裏：http://jsfiddle.net/3yf2Q/2/ – Ming

@setek你已經釘住了它。我想我第一次不明白這個問題。 'rgba（0,0,0,0.05）'是在僅在背景上設置不透明度的方式。這不適用於IE8及以下版本，除非您應用回退。我會更新我的答案。 –

隨意使用我從你更新的小提琴:) – Ming

你，因爲它適用於你的文本以及刪除不透明度，或者只是指定不透明度：1;爲李部分保持某種亮點。

.top-nav li { 
    display: inline-block; 
    font-size: 14px; 
    padding: 0; 
    margin: 0; 
    width: 100px; 
    background: #296E9A; 
    text-align: center; 
    border-radius: 5px; 
    opacity: 1; 
}

來源

2014-01-17 02:41:50

mouseover background「highlight」covering text

回答

相關問題