CSS - ホバーの背景を変更すると動作しない

CSSを使用しようとしているので、何かにカーソルを置くと背景色が変わります。私が使用しているコードは動作しません。私はなぜ思うのか分からない。それはうまくいくはずですよね？CSS - ホバーの背景を変更すると動作しない

body { 
 
    margin: 0; 
 
    font-family: Arial; 
 
    font-size: 1em; 
 
} 
 

 
.navbar-ul, a { 
 
    margin: 0; 
 
    color: white; 
 
    overflow: hidden; 
 
} 
 

 
li, a { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    background: black; 
 
} 
 

 
li a :hover { 
 
    background-color: blue; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
    float: left; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Dark Website Template by Jordan Baron</title> 
 
     <link rel="stylesheet" href="styles-main.css"> 
 
    </head> 
 
    
 
    <body> 
 
     
 
     <div class="navbar"> 
 
      <ul class="navbar-ul"> 
 
       <li><a href="#">HOME</a></li> 
 
       <li><a href="#">CONTACT</a></li> 
 
       <li><a href="#">ABOUT</a></li> 
 
      </ul> 
 
     </div> 
 
     
 
    </body> 
 
    
 
</html>

助けてください！

出典

2016-09-10 Anonymous

何もしませんhover' –

'の前にスペースを削除します。 –

かなりわかります –

同様a要素を少しあなたの-ホバーのルールを調整して考えてみます。

li:hover, li:hover a { 
    background: blue; 
}

body { 
 
    margin: 0; 
 
    font-family: Arial; 
 
    font-size: 1em; 
 
} 
 

 
.navbar-ul, a { 
 
    margin: 0; 
 
    color: white; 
 
    overflow: hidden; 
 
} 
 

 
li, a { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    background: black; 
 
    transition: .7s; 
 
} 
 

 
li:hover, li:hover a { 
 
    background: blue; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
    float: left; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Dark Website Template by Jordan Baron</title> 
 
     <link rel="stylesheet" href="styles-main.css"> 
 
    </head> 
 
    
 
    <body> 
 
     
 
     <div class="navbar"> 
 
      <ul class="navbar-ul"> 
 
       <li><a href="#">HOME</a></li> 
 
       <li><a href="#">CONTACT</a></li> 
 
       <li><a href="#">ABOUT</a></li> 
 
      </ul> 
 
     </div> 
 
     
 
    </body> 
 
    
 
</html>

出典

2016-09-10 15:15:28 UncaughtTypeError

私はこの移行が好きですので、+1 upvote。 –

@YashJainそれ以外の点では、状態の変化に素敵な感触を加える:) – UncaughtTypeError

VERY簡単な間違いがあります。

あなたはこのコードを持っている

...

li a: hover

はaと:hoverの間のスペースを削除し、魔法を参照してください。

これは次のようになります。

li a:hover

@Josephヤングは、彼のコメントをupvoteすることを忘れないでください、これを言及しました。

body { 
 
    margin: 0; 
 
    font-family: Arial; 
 
    font-size: 1em; 
 
} 
 

 
.navbar-ul, a { 
 
    margin: 0; 
 
    color: white; 
 
    overflow: hidden; 
 
} 
 

 
li, a { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    background: black; 
 
} 
 

 
li a:hover { 
 
    background-color: blue; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
    float: left; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Dark Website Template by Jordan Baron</title> 
 
     <link rel="stylesheet" href="styles-main.css"> 
 
    </head> 
 
    
 
    <body> 
 
     
 
     <div class="navbar"> 
 
      <ul class="navbar-ul"> 
 
       <li><a href="#">HOME</a></li> 
 
       <li><a href="#">CONTACT</a></li> 
 
       <li><a href="#">ABOUT</a></li> 
 
      </ul> 
 
     </div> 
 
     
 
    </body> 
 
    
 
</html>

出典

2016-09-10 15:13:10

* { 
margin: 0; 
padding: 0; 
} 

.wrapper { 
padding-top: 10px; 
width: 320px; 
margin: 0 auto; 
overflow: hidden; 
} 
.menu { 
background: #093; 
} 
.menu ul { 
margin-left: 0; 
list-style: none; 
text-align: center; 
} 
.menu ul li { 
display: inline-block; 
} 


.menu ul li a { 
display: block; 
padding: 10px; 
color: #CC0; 
text-decoration: none; 
} 
.menu ul li a:hover { 
background: #C30; 
color: #FFF; 
}

<div class="wrapper"> 
    <div class="menu"> 
    <ul> 
    <li><a href="">HOME</a> 
    </li> 
     <li><a href="">CONTACT</a> 
     </li> 
    <li><a href="">ABOUT</a> 
    </li> 
    </ul> 
</div>

出典

2016-09-10 15:39:39

CSS - ホバーの背景を変更すると動作しない

答えて

関連する問題