0

我有一个小问题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;
}

所以我把这个添加到 make productshover，消失了：

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

或者

#top-menu ul li span:hover { }

但它没有。谁能告诉我我做错了什么？

谢谢。

4

3 回答 3

0

尝试用!importantlike为 a 添加悬停

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

因为您之前已经为锚标签提供了border-bottom。

于 2013-08-03T05:45:10.017 回答
0

对跨度说类似的话：

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

它应该否定悬停效果。希望这可以帮助。

于 2013-08-03T05:48:32.787 回答
0

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

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

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

于 2013-08-03T05:48:40.147 回答