CSS懸停不起作用

爲什麼li::hover在將光標懸停在<li>上時沒有反應？CSS懸停不起作用

* { 
 
    box-sizing: border-box;  
 
    font-family: "Hiragino Kaku Gothic Pro", sans-serif; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
    background-color: #555; 
 
    color: white; 
 
    display: table-cell; 
 
    width: 200px; 
 
    margin: 0; 
 
    height: 43px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
li::hover { 
 
    background-color: black; 
 
}

<!DOCTYPE html> 
 
<html lang="ja"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>List</title> 
 
     <link rel="stylesheet" href="listbar.css" type="text/css"> 
 
    </head> 
 
    <body> 
 
     <ul> 
 
      <li>Python</li> 
 
      <li>C</li> 
 
      <li>Ruby</li> 
 
      <li>JavaScript</li> 
 
      <li>Lisp</li> 
 
     </ul> 
 
    </body> 
 
</html>

來源

2016-08-02 KiYugadgeter

李只是一個冒號：懸停會做。一個冒號用於表示僞類（一組可能的狀態，如鏈接，訪問，懸停，第一個孩子）或某些傳統僞元素（之前和之後）;兩個冒號表示一個CSS3僞元素（請參閱reference）。僞元素是頁面上由其位置或上下文隱含的元素;僞類是現有元素的變體。除了

li::hover {

需求

* { 
 
    box-sizing: border-box;  
 
    font-family: "Hiragino Kaku Gothic Pro", sans-serif; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
    background-color: #555; 
 
    color: white; 
 
    display: table-cell; 
 
    width: 200px; 
 
    margin: 0; 
 
    height: 43px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
li:hover { 
 
    background-color: black; 
 
}

<!DOCTYPE html> 
 
<html lang="ja"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>List</title> 
 
     <link rel="stylesheet" href="listbar.css" type="text/css"> 
 
    </head> 
 
    <body> 
 
     <ul> 
 
      <li>Python</li> 
 
      <li>C</li> 
 
      <li>Ruby</li> 
 
      <li>JavaScript</li> 
 
      <li>Lisp</li> 
 
     </ul> 
 
    </body> 
 
</html>

來源

2016-08-02 01:56:26 Owen

一些CSS選擇器使用兩個冒號。二者和一個有什麼不同？ – KiYugadgeter

在有幫助的情況下增加更多的解釋。 – Owen

你的代碼的偉大工程是

li:hover {

你在那裏有一個額外的冒號。

來源

2016-08-02 02:08:01

你需要寫這樣的：

li:hover { 
     background-color: black; 
    }

來源

2016-08-02 02:21:52 TonyYang

CSS懸停不起作用

回答

相關問題