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

ただ1コロン：ホバーを行います。 1つのコロンは、擬似クラス（リンク、訪問先、ホバー、ファーストチャイルドなどの可能な状態の小さな集合）または特定のレガシー擬似要素（前後）を示すために使用されます。 2つのコロンはCSS3疑似要素を示します（referenceを参照）。擬似要素とは、その場所や文脈によって暗示されるページ上の要素です。擬似クラスは、既存の要素のバリエーションです。

* { 
 
    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セレクタを2つのコロンを使用しています。 2人と1人の違いは何ですか？ – KiYugadgeter

役立つ場合は、もう少し説明を追加しました。 – Owen

あなたのコードは、その

li::hover {

除いて素晴らしい作品あなたがそこに余分なコロンを持っていた

li:hover {

する必要があります。

出典

2016-08-02 02:08:01

あなたはそのように書く必要があります。

li:hover { 
     background-color: black; 
    }

出典

2016-08-02 02:21:52 TonyYang

CSSホバーが反応しません

答えて

関連する問題