Question

我为网站进行导航，当我尝试使：hover进行导航时，它只会更改背景颜色，而不会更改链接的颜色，为什么？

我尝试了很多事情，但是效果不佳。可能我犯了一些错误。

HTML：

<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="styles.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
<ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Новости</a></li>
    <li><a href="#">Контакты</a></li>
    <li><a href="#">О компании</a></li>
    <li><a href="#">Как добраться</a></li>
</ul>
</body>
</html>

CSS：

ul {
    color:blue;
    list-style-type: none;
    width: 200px;
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: none;
}

li {
    border: 1px solid blue;
    padding: 7px 5px 8px 5px;
    margin: 5px 0px 5px 0px;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    background-color: #3a3939;
    border-color: black;
}

li:hover{  /* Here looks everything fine */
    background-color: white;
    cursor: pointer;
    border-color: black;
    color: black;
}

a:link, a:visited {
    color: white;
}

Answer 1

两件事情：首先，您的hover块仅更改background-color而不是color。其次，您要更改li元素而不是a子元素的属性。

要更改li内部链接的属性，请考虑以下问题：

li:hover a {
    color: red;
}

li:hover {
    background-color: white;
    cursor: pointer;
    border-color: black;
}

Answer 2

尝试将其添加到您的CSS中： li:hover > a:link { color: black; }

Answer 3

只需添加

li:hover > a{
    color:#000;
}

Answer 4

更改li：hover上的颜色以更改文本颜色，但也将颜色设置为在a：link本身上继承

class Server
{
   Server();
   ~Server()=0;
   virtual void send(const std::string& string);
   virtual std::string receive();
};

class TcpServer:public Server
{
   TcpServer();
   ~TcpServer();
   void send(const std::string& string)
   {...}
   std::string receive(){...}
};

class UdpServer : public Server
{
    UdpServer ();
    ~UdpServer ();
    void send(const std::string& string)
    {...}
    std::string receive(){...}
};



main()
{
    Server* server = new TcpServer()/UdpServer;
}

ul {
    color:blue;
    list-style-type: none;
    width: 200px;
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: none;
}

li {
    border: 1px solid blue;
    padding: 7px 5px 8px 5px;
    margin: 5px 0px 5px 0px;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    background-color: #3a3939;
    border-color: black;
}

li:hover{  /* Here looks everything fine */
    background-color: white;
    cursor: pointer;
    border-color: black;
    color: black; /* Add this here */
}

a:link, a:visited {
    color: inherit; /* make this color reflect li:hover's color using inherit*/
}

为什么：hover仅更改背景颜色，但不更改链接颜色？

4 个答案: