Как отобразить элемент при наведении на другой элемент?

Question

Я пробовал с как ниже, что я искал от stackru, но еще не работает! Это делает на riot.js поэтому я связываю то, что я пробовал здесь. Я хочу показать .overlay div когда зависать #over Кнопка со стрелкой вниз, но пока не отображается.

#over:hover + .overlay {
    opacity:1;
}
#over:hover > .overlay {
    opacity:1;
}
#over:hover ~ .overlay {
    opacity:1;
}

Answer 1

Ни один из этих селекторов не работает, потому что div.overlay не является ни потомком, ни родным братом div#over,

Чтобы сделать то, что вы хотите - с чистым CSS, вам нужно немного изменить структуру HTML - чтобы сделать родных братьев и сестер.

Например, добавив div.overlay рядом с div#over сделал бы трюк:

<h3>{Now} {opts.title}
    <div id='over'>^</div>
    <div class='overlay'>
       <li>Editable</li>
    </div>
</h3>

Для этого потребуется следующее правило CSS:

#over:hover + .overlay {
    opacity:1;
}

Но для этого потребуется отрегулировать абсолютную позицию div.overlay, Я оставляю это тебе.

Вот обновленный plnkr: http://plnkr.co/edit/nSNn1t0Lpuw9uUZQ1N8h?p=preview

Answer 2

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

В HTML:

<div id='over'>^</div>
  <div class='overlay'>
  <div>Editable</div>
</div>

В CSS:

#over:hover ~ .overlay {
  opacity: 1;
}

Взгляните на обновленный Plunkr.

Надеюсь это поможет!

Answer 3

Потому что расположение двух div'ов смешивается... в функции мышью в / мышью. попробуйте изменить стиль CSS оверлея.

В CSS:

.overlay {
    position:absolute;
    background:#000;
    color:white;
    list-style-type:none;
    right:30px;
    top:18%;
    opacity:0;
  }

Рабочий пример здесь: Plunkr.

также ваш стиль css float: прямо на #over может быть проблема с вашей функцией наведения мыши, которая работает только тогда, когда вы указали справа от вашего div.