Изменение фона при наведении

@masonok · Регистрация: 26.06.2015

Author24 — интернет-сервис помощи студентам

всем привет. казалось бы, простая задача, но

есть такая структура:

HTML5

1	<span class="menu">пункт1</span><span class="menu">пункт2</span><span class="menu">пункт2</span>

css

CSS

.menu{
color:#0000CC; 
width:8%; 
cursor: pointer; 
background: #f3f3f3; 
height: 90px; 
float: left; 
}
 
.menu: hover{background: #0000FF;}
.menu: hover a{ color: #ffffff;}

пытаюсь сделать, чтобы прри наведении на span, менялся его фон, но с таким кодом не работает. в чем ошибка, подскажите пожалуйста.

делать не span, а див не варик, тк все руинится.

@Fedor92 · 26.08.2015, 13:36

masonok, пример:

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>list</title>
    <style>
    span.menu{
color:#0000CC; 
width:8%; 
cursor: pointer; 
background: #f3f3f3; 
height: 90px; 
float: left; 
border:2px solid red
}
 
span.menu:hover{background: #0000FF;}
span.menu:hover a{ color: #ffffff;}
 
    </style> 
</head>
<body>
    <span class="menu">пункт1</span><span class="menu">пункт2</span><span class="menu">пункт2</span>
</body>
</html>

Не ставьте лишних пробелов в стилях(перед hover

)

@masonok · 26.08.2015, 14:54 **[ТС]**

Fedor92, спасибо огромное!

а как прописать стиль ссылки для не hover спана?

пробую так:

CSS

1	span.menu:a {color: #0000FF;}

не получается

@Fedor92 · 26.08.2015, 15:05

masonok, можно так например:

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>list</title>
    <style>
    span.menu, span.menu2{
color:#0000CC; 
width:8%; 
cursor: pointer; 
background: #f3f3f3; 
height: 90px; 
float: left; 
border:2px solid red
}
 
span.menu:hover{background: #0000FF;}
span.menu:hover a{ color: #ffffff;}
 
span.menu2 a:hover{background:red}
 
    </style> 
</head>
<body>
    <span class="menu">пункт1</span><span class="menu2"><a href="#">пункт2</a></span><span class="menu">пункт2</span>
</body>
</html>

@masonok · 26.08.2015, 15:23 **[ТС]**

Fedor92, это еще одно спасибо

@masonok 0 / 0 / 0 Регистрация: 26.06.2015 Сообщений: 66
	26.08.2015, 15:23 [ТС]	5
	Fedor92, это еще одно спасибо 0

Изменение фона при наведении

Решение