Как скрыть div при наведении мыши на другой div? - PullRequest
Новая
       18

Как скрыть div при наведении мыши на другой div?

0 голосов
/ 09 марта 2012

У меня есть что-то вроде HTML: 

<table>

  <tr>
     <td><div class='record'>Record Link</div></td>
     <td><div class='delete' style='display:none;'>Delete Link</div></td>
  </tr>

  <tr>
     <td><div class='record'>Record Link</div></td>
     <td><div class='delete' style='display:none;'>Delete Link</div></td>
  </tr>

</table>

Delete Link скрыто в HTML выше. Я хочу показать Delete Link при наведении курсора на связанный record DIV

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

document.on('mouseover', 'div.record', function(event, element) {
    event.target.hide(); // testing: it hides the record itself
});

Следующие коды не работают для меня: 

$('delete').setStyle({ display: 'block' });
$$('div.delete').setStyle({ display: 'block' });

Ответы [ 2 ]

2 голосов
/ 09 марта 2012

попробуйте CSS: 

table#mytable tr:hover .delete{  /*identify your table for this effect, so as not to affect other tables*/         
    display:block !important;    /* !important is needed for override since */ 
}                                /* you styled "display:none" on element level */

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

1 голос
/ 09 марта 2012

В Prototype, установив $("delete"), вы вызываете элемент с идентификатором delete, который я нигде не вижу.Вам нужно установить <div id='delete' style='display:none;'>Delete Link</div>

и использовать следующее для привязки событий и незаметного запуска скрипта:

EDIT Поскольку многие div.delete используют $$() селектор следующим образом 

     document.observe("dom:loaded", function(){
     var deleteLinks=$$(".delete");
     for(var i=0;i<deleteLinks.length;i++){

        deleteLinks[i].observe("mouseover",functio(){
          this.setStyle({ display: 'block' });


        }); //bind event

      }
    });

Если вы хотите скрыть mouseover установить display:none вместо display:block Вы также можете использовать visibility:hidden, но это все равно будет занимать место в вашем html какплощадь участка

...