div-ы с одинаковым class
 

Доброго дня. Есть модуль который создает блоки (блоки категорий). Сам блок состоит из картинки категории, имени категории и блока субкатегорий. Нужно что бы блок субкатегорий был скрыт и появлялся только при наведении курсора на картинку категории. Скрываю div выводящий субкатегории - visibility:hidden и использую:

function find_sp() {
var f1 = document.getElementById('hp').getElementsByClassNa me('sp')
for (var i=0; i<f1.length; i++)
f1[i].style.visibility = "visible";
}

function hide_sp() {
var f1 = document.getElementById('hp').getElementsByClassNa me('sp')
for (var i=0; i<f1.length; i++)
f1[i].style.visibility= "hidden";
}

Использую это для onMouseOver и onMouseOut.

Но поскольку div-ы создаются автоматически (сколько категорий - столько div-ов) и у всех них один класс: "sp", то при onMouseOver на любую категорию становятся видимыми субкатегории для всех div-ов (т.е. для всех категорий, а не только для той, для которой было событие onMouseOver)

Ребят, подскажите, как реализовать это так, что бы при наведении мыши видимым становлися только блок для одной категории?

покажи html. нифига не ясно.

рулить надо от this...

по логике, которую рассказал мне код (?) у тебя так и должно происходить. ты это написал сам

Сейчас у меня при наведении курсора на любую из категорий - показываются субменю для ВСЕХ категорий какие есть... а мне нужно что бы только для той на которую наведен курсор.

Вот как выводятся категории:



<ul class="pagecateg">
<li >
<div class="categimg" ><a href="http://" title="">
<img src="" title="" alt=""/ onMouseOver="find_sp()" onMouseOut="setTimeout('hide_sp()', 5000)" ></a></div>

<p class="categname" style="padding-bottom:5px" >


<a href="http://" title="" >Text </a></p>

<div class="sp" style='visibility:hidden;'> <div class="subcat">
<a href="http:" title="">
Название субкатегории</a>

</div></div>

категорий много (больше 10) и таких вот блоков - тоже будет много... они все одинаковые, вот и получается что при наведении мыши на любую категорию - делаются видимыми субкатегории у всех...

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

вот копия того же скрипта

var i = document.getElementsByTagName("div"),
    a = i.length,
    img,
    mouseoverDivCateg;
    

// назначаем обработчики.
while( a-- ) if ( i[a].className === 'categimg' ) {
    
    // img - картинка внутри div с классом categimg.
    img = i[a].getElementsByTagName('img')[0];
    
    img.onmouseover = find_sp;
    img.onmouseout = hide_sp;
    
}

function find_sp(e) {
    var parent, currElem = e ? e.target : event.srcElement;
    
    // ищем li , с которой начинается текущая категория.
    while( currElem.tagName.toLowerCase() !== 'li' ) currElem = currElem.parentNode;
    

    // ищем div с классом sp, который относится  к текущей категории
    var div = currElem.getElementsByTagName("div"),i = div.length;
    while( i-- ) if (div[i].className === "sp") break;
        div = div[i];

    div.style.visibility = "visible";
    
    // сохраняем этот дивчик, чтобы потом не искать
    mouseoverDivCateg = div;
    
}

function hide_sp() { 
    // скрываем сохраненный див
    mouseoverDivCateg.style.visibility= "hidden";
}

Ругается на: currElem.tagName is undefined и mouseoverDivCateg is undefined почему то...

а, да. забыл сказать

HTML трогал. постирай все обработчики в html.

типа

<img src="" title="" alt=""/ onMouseOver="find_sp()" onMouseOut="setTimeout('hide_sp()', 5000)" >

преврати в

<img src="" title="" alt=""/>

обновил. я протсто заигрался, и про IE забыл

ты знаешь, ругаться не ругается, но и не отрабатывает... ни в Опере, ни Файрфоксе, а в ИЕ отрабатывает но как: при наведении мышью субменю видимыми не становятся, зато при onmouseout пропадает categname (имя категории становится невидимым)

не знаю, что ты имел в виду.. наводить на картинку надо было.

заменил картинки

<div class="sp" style='visibility:hidden;'> <div class="subcat">
<a href="http:" title="">
Название субкатегории</a>

</div></div>

а если таких блоков несколько? (то есть субкатегорий по три - четыре штуки) ? не могу понять... у тебя работает, у меня - нет... хм...