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 добавляет приятное прикосновение к изменению состояния bland в другом состоянии :) – UncaughtTypeError

У вас есть ОЧЕНЬ Простая ошибка.

Если у вас есть этот код ...

li a: hover

удалить пространство между a и :hover и увидеть магию.

Теперь это должно выглядеть так.

li a:hover

Молодой @ Джозеф упомянул об этом, не забудьте 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 - Изменение фона при зависании не работает

ответ

Смежные вопросы