Показать DIV при наведении курсора мыши на поместить его DIV

Я пытаюсь отобразить div.overlay при наведении курсора мыши на встроенном div.boxПоказать DIV при наведении курсора мыши на поместить его DIV

div.overlay {padding:5px; background:#F00; width:100px; visibility: hidden;} 
div.box {display:block; background:#FF0; width:100px; visibility:visible;} 
div.box:hover div.overlay { visibility: visible;} 

<div class="overlay"> 
<div class="box">Info about a game</div> 
Play 
</div>

Спасибо за любой намек

источник

2013-09-03 Espider

Планируете ли вы использовать JQuery? –

Как вы собираетесь нависнуть над чем-то, что не видно? – Coop

Вы (все еще) не можете диктовать поведение от детей до родителей в css – Cherniv

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

div.overlay:hover { 
    visibility: visible; 
}

Fiddle: http://jsfiddle.net/52sM5/

источник

2013-09-03 09:43:23

Отлично! Благодаря пламенной ловушке. Это именно то, чего я пропустил :) – Espider

Я предлагаю вам немного, если это возможно изменить разметку , Это позволит делать то, что вы хотите.

Вариант 1:

HTML

<div class="box">Info about a game</div> 
<div class="overlay">Play</div>

CSS

div.box, 
div.overlay { 
    width: 100px; 
    background: #FF0; } 

div.overlay { display: none; } 

div.box:hover + div.overlay { display: block; }

См скрипку: http://jsfiddle.net/3uM49/

Вариант 2

HTML

<div class="box"> 
    Info about a game 
    <div class="overlay">Play</div> 
</div>

CSS

div.box { 
    width: 100px; 
    background: #FF0; } 

div.overlay { display: none; } 

div.box:hover div.overlay { display: block; }

См скрипку: http://jsfiddle.net/kgXDT/

источник

2013-09-03 09:38:38 Coop

Спасибо, Coop, но мне нужно показать границу с дополнением вокруг встроенного div на hover. – Espider

Так что просто используйте мой вариант 2 и добавьте дополнение к div.box. См. Здесь: http://jsfiddle.net/kgXDT/1/ – Coop

Вариант 2 немного лучше, потому что вы можете удерживать мышь над «наложением», не скрывая ее. – Kobi

копию и заменить CSS с моим CSS

div.overlay {padding:5px; background:#F00; width:100px; visibility: hidden;} 
div.box {display:block; background:#FF0; width:100px; visibility:visible;} 
div.overlay:hover { visibility: visible;}

источник

2013-09-03 11:47:41

Показать DIV при наведении курсора мыши на поместить его DIV

ответ

Смежные вопросы