Question

我正在尝试创建一个导航栏，当鼠标悬停在背景时会突出显示背景，但是当我这样做时，文本也会突出显示并且不再可见（几乎没有）。

这是我当前的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;
}

Answer 1

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 */
}

删除不透明度属性，当您将鼠标悬停在导航链接上时，应显示文字。

添加background: rgba()以设置具有Alpha透明度的背景颜色（这仅影响背景，而不影响文本或任何子节点）。

另请注意，rgba（）支持现代浏览器，但缺乏对IE8及更低版本的支持。您必须应用rgb()或任何其他颜色值作为兼容性支持的后备。

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

谢谢@setek：）

Answer 2

您必须删除不透明度，因为它也适用于您的文字，或者只指定不透明度：1;为li部分保持某种亮点。

.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;
}

鼠标悬停背景“突出显示”覆盖文本

2 个答案: