Question

我遇到hover的小问题。所以我想在hover标记内a标记的span已消失。

这是我的HTML文件：

<nav id="top-menu">
    <ul>
        <li> <a href="file:///C:/Users/Misha/Desktop/amazon/amazon_site/home.html">Home</a> </li>
        <li> <span><a href="">Products</a></span> </li>
        <li> <a href="">Statistics</a> </li>
        <li> <a href="">Countries</a> </li>
        <li> <a href="">Settings</a> </li>
        <li> <a href="">Contacts</a> </li>
    </ul>
</nav>

这是我的CSS文件：

nav#top-menu {
    width: 100%;
    height: 33px;
    background-color: #696969;
    margin: 0;
    padding: 0;
}

#top-menu ul {
    display: block;
    list-style-type: none;
    width: 600px;
    margin: 0 auto;
    padding: 0;
}
#top-menu ul li {
margin: 0;
padding: 0;
}

#top-menu ul li a {
    display: block;
    float: left;
    max-height: 25px;
    width: 100px;
    margin: 0;
    padding: 5px 0;
    font-family: tahoma, sans-serif;
    font-size: 20px;
    text-align: center;
    background-color: #696969;
    text-decoration: none;
    color: #FFFFFF;
    border-bottom: #696969 solid 2px;
}

#top-menu ul li a:hover { border-bottom: #FFFFFF solid 2px; }

#top-menu ul li span a{
    color: black;
}

所以我添加这个来制作products hover，消失了：

#top-menu ul li span a:hover { }

或

#top-menu ul li span:hover { }

但事实并非如此。谁能告诉我我做错了什么？

感谢。

Answer 1

尝试使用!important之类的

为a添加悬停

#top-menu ul li span a:hover {
     border-bottom: #FFFFFF solid 2px !important;
}

因为你之前已经给过了锚标记的边框底部。

Answer 2

对于跨度说出类似的话：

span a:hover{/*Nothing here*/}

它应该否定悬停效果。希望这会有所帮助。

Answer 3

将鼠标悬停设置为与周围样式相同（包括text-decoration：none），并将其标记为！important，以便它们覆盖浏览器默认样式表。

#top-menu ul li span a:hover {
    color: #FFFFFF !important;
    border-bottom: #696969 solid 2px !important;
    text-decoration: none !important;
}

您必须专门控制的属性是“悬停”通常会设置的属性。最典型的是，这可能是颜色。

CSS：在“span”标签内“悬挂”“a”标签，消失了

3 个答案: