Прототип Ховер Контент и Дети

Question

Я использую:

    Event.observe(window, 'load', function() {  
$$('li').invoke('observe', 'mouseover', function(event) {
    this.children[0].toggle();
});

$$('li').invoke('observe', 'mouseout', function(event) {
    document.children[0].toggle();
});
    });   

<ul>
  <li>
    <div style="display:hidden;">Hidden Div</div>
    <div>More content that isn't hidden</div>
  </li>
</ul>

Для отображения скрытого элемента внутри элемента, когда этот элемент наведен на него.Это частично работает, однако мой код выглядит следующим образом:

Когда я переключаю li, он отображает скрытый div, однако если я переключаю второй div, он снова скрывает комментарий, даже если этот div находится вли.Зачем?Я нашел это вопросов, но, похоже, он не работает и для этого контекста.

Answer 1

Для этого не нужно использовать прототип или javascript, используйте css

li.item:hover div.entry {
 display:block
}

li.item div.entry {
 display:none
}

Вы не используете классы CSS в своем примере кода, но я настоятельно рекомендую вам сделать это для этого случая

<ul>
  <li class="item">
    <div class="entry">Hidden Div</div>
    <div>More content that isn't hidden</div>
  </li>
</ul>

Answer 2

Добавьте класс в div, для которого вы хотите выполнить переключение.Затем внутри обработчика событий используйте this.select (), чтобы найти потомков с этим именем класса.

 <ul>
  <li>
    <div class="hidden">Hidden Div</div>
    <div>More content that isn't hidden</div>
  </li>
</ul>

Event.observe(window, 'load', function() {  
    var lis = $$('li');

    var toggleFunc = function(event) {
        this.select('.hidden').toggle();
    }

    lis.observe('mouseover', toggleFunc);
    lis.observe('mouseout', toggleFunc);
});

Answer 3

Быстрое решение было бы использовать этот плагин , который добавляет функциональность "mouseEnter" и "mouseLeave" для браузеров, отличных от IE.