Затемнение пунктов меню

[BHy4ok]

Здравствуйте все!
Выручайте устал уже читать и искать выход
Есть html

<div class="s1">
                <div class="s2">
                <div class="p1">
                <ul class="subMenus">
                 <li><a href="#">Sub menu 1 item 1</a></li>
                 <li><a href="#">Sub menu 1 item 2</a></li>
                 <li><a href="#">Sub menu 1 item 3</a></li>
                 <li><a href="#">Sub menu 1 item 4</a></li>
          </ul>
</div>

                 <div class="p1">
                <ul class="subMenus">
                 <li><a href="#"></a></li>
                 
          </ul>
</div>
                 <div class="p1">
                 <ul class="subMenus">
                 <li><a href="#">Sub menu 3 item 1</a></li>
                 <li><a href="#">Sub menu 3 item 2</a></li>
                 <li><a href="#">Sub menu 3 item 3</a></li>
                 <li><a href="#">Sub menu 3 item 4</a></li>
          </ul>
</div>
                
                            
               
                </div>
            </div>

Нужно чтобы при наведении на <li> другие <li> затемнялись и затемнялся .p1

Вот этот код работает но только если все li под одним <ul> и <div>, мне данный вариант не подходит так как слетит другой скрипт

$(document).ready(function(){


$(function() {      
        $("ul.subMenus  li").css("opacity","1.0");       
        $("ul.subMenus  li").hover(function () {     
                $(this).siblings().stop().animate({opacity: 0.5}, 

"slow");   
        },          
        function () {      
                $("ul.subMenus  li").stop().animate({opacity: 1.0}, 

"slow");       
        });   
});


});

Прошу вашей помощи

[caetus]

CSS http://htmlbook.ru/css/hover

[BHy4ok]

CSS http://htmlbook.ru/css/hover

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

[caetus]

так тебе нужно ?

<style>
#div {
border: solid black 1px;
display: inline-block;
}
.hover {
	background: red;
	transition: 3s;
}
.normal {
	background: #fff;
	transition: 3s;
}
a {
display: inline-block;

}
</style>

<div id="div">
      <div class="s1">
                <div class="s2">
                <div class="p1">
                <ul class="subMenus">
                 <li><a href="#">Sub menu 1 item 1</a></li>
                 <li><a href="#">Sub menu 1 item 2</a></li>
                 <li><a href="#">Sub menu 1 item 3</a></li>
                 <li><a href="#">Sub menu 1 item 4</a></li>
          </ul>
</div>

                 <div class="p1">
                <ul class="subMenus">
                 <li><a href="#"></a></li>
                 
          </ul>
</div>
                 <div class="p1">
                 <ul class="subMenus">
                 <li><a href="#">Sub menu 3 item 1</a></li>
                 <li><a href="#">Sub menu 3 item 2</a></li>
                 <li><a href="#">Sub menu 3 item 3</a></li>
                 <li><a href="#">Sub menu 3 item 4</a></li>
          </ul>
</div>
                
                            
               
                </div>
            </div>
</div>

<script>

var div = document.getElementById('div');

div.addEventListener('mouseover', fn, false);

function fn (e) {
e = e.target || e.srcElement;

if(e.tagName.toLowerCase() !== 'a') return;

var elem = div.querySelectorAll('a')
for(var i = 0; i < elem.length; i++) {
        if(elem[i].className !== 'hover')	elem[i].className = 'hover';
}
e.className = 'normal'

div.addEventListener('mouseout', out, false);
}

function out (e) {
e = e.target || e.srcElement;
if(e.tagName === 'A') return;
	var elem = div.querySelectorAll('a')
	for(var i = 0; i < elem.length; i++) {
                if(elem[i].className != 'normal')	elem[i].className = 'normal';
	}

div.removeEventListener('mouseout', out);
;
}

</script>

[BHy4ok]

Да СПАСИБО громаднейшее! почему-то не работает если вставить в head и в моем случае hover (красный цвет) пропадает только тогда когда мышкой наводишь на адресную строку не знаете в чем может быть дело

[caetus]

<script> </script> должен бить в самом низу html страницы , можно после body.

я чуток изменил скрипт можешь опять скопирувать теперь будет пропадать цвет когда курсор убираешь с ссылки !

и перепиши в стили ООП или эти функции возьми в анонимную функцию (function(){ cod...}());

[caetus]

может я тебя не правильно понял , пиши попробую помочь !

[BHy4ok]

Спасибо, хорошо что есть такие люди

[BHy4ok]

щас попробую

[BHy4ok]

СПАСИБО все работает а если не секрет в чем отличие от предыдущего