Активация стиля :hover
Доброго времени всем.
Вопрос такого характера: Есть несколько блоков. Один с кнопками-ссылками, второй, соответственно, с содержимым (что-то похожее на некий слайдер). Подскажите, как сделать, чтобы если, например, активна одна кнопка и отображается её содержимое, то к ней применялся бы стиль :hover. Заранее спасибо.)) |
jquery -> .hover() меняйте background через css.
Путем добавления класса.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.block{width:300px;height:300px;background:#000000;}
.block_hover{background:#ff0000;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.block').hover(function() {
$(this).addClass('block_hover');
},function() {
$(this).removeClass('block_hover');
});
});
</script>
</head>
<body>
<div class="block"></div>
</body>
</html>
|
Ой тьфу, млин, это к кнопке надо, или к ссылке, если к ссылке - то там проще простого, если к кнопке лучше воспользоваться hover.
Если везде хотите, чтобы работало в старых браузерах. |
#id1 {
background: url('http://knigthvolk.my1.ru/SC/menu/novosti.png') no-repeat;
width: 70px;
height: 15px;
border: 0;
color: transparent;
outline: none;
position: absolute;
left: 5px;
top: 0px;
}
#id1:hover {
background: url('http://knigthvolk.my1.ru/SC/menu/novosti_a.png') no-repeat;
}
.id1 {
background: url('http://knigthvolk.my1.ru/SC/menu/novosti_a.png') no-repeat;
}
#id2 {
background: url('http://knigthvolk.my1.ru/SC/menu/rozysk.png') no-repeat;
width: 70px;
height: 15px;
border: 0;
color: transparent;
outline: none;
position: absolute;
left: 5px;
top: 40px;
}
#id2:hover {
background: url('http://knigthvolk.my1.ru/SC/menu/rozysk_a.png') no-repeat;
}
.id2 {
background: url('http://knigthvolk.my1.ru/SC/menu/rozysk_a.png') no-repeat;
}
<script type="text/javascript">
function newsSwitch(ne, cl) {
document.getElementById('n1').style.display = 'none';
document.getElementById('n2').style.display = 'none';
document.getElementById('n3').style.display = 'none';
document.getElementById('n4').style.display = 'none';
document.getElementById('n5').style.display = 'none';
document.getElementById(ne).style.display = 'block';
document.getElementById('id1').className = '';
document.getElementById('id2').className = '';
document.getElementById('id3').className = '';
document.getElementById('id4').className = '';
document.getElementById('id5').className = '';
document.getElementById(cl).className = cl;
}
</script>
<a href="javascript:newsSwitch('n1', 'id1');" id="id1"></a><br />
<a href="javascript:newsSwitch('n2', 'id2');" id="id2"></a><br />
<a href="javascript:newsSwitch('n3', 'id3');" id="id3"></a><br />
<a href="javascript:newsSwitch('n4', 'id4');" id="id4"></a><br />
<a href="javascript:newsSwitch('n5', 'id5');" id="id5"></a>
</div>
Собственно вот мой код. n1-n2 блоки, ну там, я думаю, понятно. Класс у активного элемента появляется как надо, но фоновая картинка не меняется. |
Спасибо, ребята! Проблема решилась добавлением в классы !important.))))
|
А не подскажите, вот был преведен пример с ид для каждого элемента, а можно без него сделать?
т.е. если список в котором находятся ссылки, пускай будет выглядеть вот так: <ul> <li><a ... /></li> .... <li><a ... /></li> </ul> При клике на любой из них элементу списка будет добавляться класс, а как сделать, что бы при клике на другой элемент списка этот класс переходил к нему, т.е. из прошлого он удалялся и появлялся в новом. Большое спасибо. |
| Часовой пояс GMT +3, время: 13:23. |