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悬停不起作用

回答

相关问题