Изменение нескольких стилей при наведении на блок

Freedin · February 18, 2012

Уважаемые знатоки JS столкнулся вот с такой проблемой:

Допустим есть элемент (в моем случае изображение) окруженное несколькими блоками (дивами) вложенных один в один, получается изображение находится внутри всех этих дивов. Так вот необходимо сделать, чтобы при наведении на изображение менялись стили всех этих дивов.

Вот пример кода html:


<div class="sliderbox">
  <div class="sliderbox-content">
    <div class="sliderbox-item">
      <img src="images/slide1.jpg" width="179" height="99" border="0" alt="" />
    </div>
  </div>
</div>

По умолчанию имеются стили для всех перечисленных классов sliderbox, sliderbox-content, sliderbox-item так вот решения только средствами CSS я не нашел решил действовать через JS, поскольку в JS не силен решил обратиться за помощью. Предполагаю, что необходимо сделать функцию которая в зависимости от onMouseOver или onMouseOut будет делать выборку значений стилей. В Интернет нашел вот такой пример кода:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Проверка</title>
<script>
function ser(obj){
obj.className="style2"; <!-- Это функция отвечает за то чтобы при наведении мышкой менялся стиль-->
}
</script>
<script>
function serr(obj){
obj.className="res"; <!-- Это функция отвечает за то что если вашка мышка не наведена на ячейку то стиль останется прежним-->
}
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="res" onMouseOver=ser(this) onMouseOut=serr(this)>Привет</div>

</body>
</html>

.style2 {background:url(1.jpg);} <!-- Это картинка при наведении мышкой  -->
.res {background:url(2.jpg);} <!-- Это обычная картинка  -->

В данном примере идет присвоение стиля в зависимости находится ли мышка на надписи но здесь идет присвоение конкретно стиля а надо присвоить значение нескольких стилей при наведении мышки на объект (изображение) подкажите плиз как реализовать данную задачу. Понимаю что решение в принципе должно быть элементарное но в связи с тем что только начинаю изучать JS сам сделать не могу.

K313 · February 18, 2012

а чем не подходит sliderbox:hover { стили... }

Freedin · February 18, 2012

а чем не подходит sliderbox:hover { стили... }

Не пойму о чем вы??? То что вы предлагаете применимо только для блока sliderbox а как же со вложенными быть. Необходимо чтобы конкретно менять стили для каждого вложенного блока.

K313 · February 19, 2012

	<style>
	.sliderbox{background:#ddd;width:300px;height:200px;}
	.sliderbox:hover{background:#ff0;}
	.sliderbox-content{background:#bbb;width:280px;height:180px;}
	.sliderbox-content:hover{background:#0ff;}
	.sliderbox-item{background:#999;width:250px;height:150px;}
	.sliderbox-item:hover{background:#f00;}
	</style>

Freedin · February 19, 2012

	<style>
	.sliderbox{background:#ddd;width:300px;height:200px;}
	.sliderbox:hover{background:#ff0;}
	.sliderbox-content{background:#bbb;width:280px;height:180px;}
	.sliderbox-content:hover{background:#0ff;}
	.sliderbox-item{background:#999;width:250px;height:150px;}
	.sliderbox-item:hover{background:#f00;}
	</style>

Вы абсолютно правы в плане простоты выполнения данной задачи я как бы не новичек в CSS и HTML и так решить задачу не подходит потому что: если вы будете наводить на каждый блок будет применяться стиль непостредственно относящийся к наведенному блоку и родительским а чтобы применились все стили необходимо будет нажать на самый внутренний блок т.е. на изображение, т.е. я делаю сложную рамку для изображения при наведении и если я буду подносить курсор к краю рамки то стиль применяется только к наружному блоку внутренние остаются без изменений пока я не наведу на изображение или на внутренний блок.

А необходимо чтобы стили применялись на все перечисленные классы одновременно даже если я наведу на крайнюю часть рамки т.е. на внешний блок. Думаю тут без JS просто не обойтись.

Я вообще думал организовать такую рамку с помощью JQuery это еще больше усложняет процесс и я еще больше запутася))) Поэтому думаю простой функции на JS будет достаточно чтобы просто определить переменную которая будет подставлять нужные классы на блоки при наведении на любую чать этих блоков.

buddah · February 19, 2012

Ну вот самый элементарный пример http://jsfiddle.net/cDSxB/

По аналогии напишите скрипт для ваших потребностей и исправьте его так, чтоб свойства возвращались в исходную позицию после того, как мышка выйдет с зоны действия hover.

Накидал просто чтоб вы поняли суть. Все очень просто.

DStereo · February 19, 2012

Думаю тут без JS просто не обойтись.

Ну почему же. Можно сделать так.


<style>
    .sliderbox{...}
    .sliderbox:hover{...}
    .sliderbox:hover .sliderbox-content{...}
    .sliderbox:hover .sliderbox-item{...}
    ...
</style>

При наведении на .sliderbox, будут меняться стили для других его элементов.

Такой принцип применяется в выпадающих менюшках на чистом css.

Freedin · February 19, 2012

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

boichukvd · October 10, 2012

(.....) Вопрос решил, поэтому удалил

Edited October 11, 2012 by boichukvd

Sign In

Изменение нескольких стилей при наведении на блок

Question

Freedin

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

K313

Link to comment

Share on other sites

Freedin

Link to comment

Share on other sites

K313

Link to comment

Share on other sites

Freedin

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

DStereo

Link to comment

Share on other sites

Freedin

Link to comment

Share on other sites

boichukvd

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information