如何使用CSS將鼠標懸停在包括項目符號的整個列表元素上？

Question

我有一個簡單的子彈清單。 懸停時，我想更改項目符號和文本的顏色。 只有文本會更改顏色，項目符號不會更改。 這是HTML和CSS：

<div id="navtop">
    <ul>
    <a href="calendar.html" > 
    <li>Calendar </li>   </a>   
    </ul>
</div>      




#navtop {
     float: right;
     width: 650px;
     font-size: 1.2em;
     padding-left: 30px;    
    padding-bottom: 0px;
    height: 65px;
}


#navtop ul {
    margin-top: 20px;
    margin-left: 70px;

}

#navtop li {
    float: left;
    position: relative;
    padding-left: 10px;
    width: 280px;
}

#navtop a,  #navtop ul  {
    color: #ffd; 
    }


#navtop  ul a:hover ,   
#navtop ul a:active,
#navtop ul  li:hover,
navtop ul li:active 
{color:#f93; }

#navtop ul a:hover  li{
    color:#f93; }

Answer 1

根據所需的項目符號樣式，以及是否可以使用unicode字符來實現，您可以使用CSS偽元素來實現與您想要的東西相似的東西。

使用list-style: none; 並用CSS偽元素內容替換項目符號可讓您控制顏色。

我整理了一個jsBin和一個小例子，也許可以在這里為您提供幫助。

您將在示例中看到，我根據類為不同的列表項着色了不同的顏色，然后將它們懸停在每個列表項上將顯示橙色的項目符號和文本。

您還可以運行以下代碼段；

 ul { list-style: none; padding : 0; } li { padding-left: 16px; position: relative; } li:before { position: absolute; left : 4px; content: "•"; } li.is--red:before { color: red; } li.is--green, li.is--green:before { color: green; } li:hover, li:hover:before { color: orange; }

 <!DOCTYPE html> <head></head> <body> <ul> <li class="is--red"><a>Some link</a></li> <li class="is--green"><a>Some other link</a></li> <li><a>Some other link</a></li> </ul> </body>

希望對您有所幫助！

如何使用CSS將鼠標懸停在包括項目符號的整個列表元素上？

問題描述

1 個解決方案

解決方案1
2 已采納 2015-09-14 23:52:41

如何使用CSS將鼠標懸停在包括項目符號的整個列表元素上？

問題描述

1 個解決方案

解決方案1 2 已采納 2015-09-14 23:52:41

解決方案1
2 已采納 2015-09-14 23:52:41