Создание div только при наведении курсора мыши

Question

Я работаю над довольно простым сайтом, но одна из вещей, которые мне нужны, это div, который появляется только при наведении курсора мыши. Я использовал следующий метод:

.mydiv { 
    text-align: center; 
    font-size: 150px; 
    color: #ffff00; 
    position: absolute; 
    width: 680px; 
    height: 180px; 
    z-index: 15; 
    top: 50%; 
    left: 50%; 
    margin: -90px 0 0 -340px; 
    background: black; 
    display: none; 
} 

.mydiv:hover { 
    display: block; 
} 

Любые идеи относительно того, почему это не работает?

Answer 1

Вы не можете нависнуть над невидимым элементом. Там не нужно принимать события наведения, и в вашем документе это займет буквально не место.

Если вы хотите, чтобы это сработало, вам нужно использовать родителя <div>, который сохраняет пространство и использует parent_div:hover child_div { display:block }, чтобы показать скрытый div.

Answer 2

display:none; не позволяет вашему элементу быть в макете. Поместите что-нибудь там, чтобы нависнуть над тем, что займет свое место, пока оно скрыто (или просто используйте вместо него visibility:hidden;).

Вы можете поместить DIV внутри контейнера DIV, который будет производить функцию парения так:

.container:hover > .mydiv { 
    display: block; 
} 

Расширения на visibility:hidden; - делать это будет по-прежнему занимает место, но так как это положение является абсолютным вы дон Из-за этого нужно беспокоиться о других движущихся элементах.

Answer 3

Когда вы используете display: none, div не отображается на странице вообще. Поэтому вы не можете навешивать на него, чтобы вызвать :hover css.

Попробуйте использовать visibility: hidden и visibility: visible. Таким образом, div остается на странице как невидимый элемент, и когда вы наводите курсор на его местоположение на странице, он будет виден.

Answer 4

Вы можете сделать это очень просто, установив непрозрачность на 0, когда вы хотите, чтобы быть невидимым, а затем при наведении курсора мыши, увеличив его до 1.

.mydiv { 
    /* your code */ 
    opacity: 0; 
} 
.mydiv:hover { 
    opacity: 1; 
} 

Если вы хотите, чтобы быть гладкой, вы можете добавить переход:

.mydiv { 
    /* your code */ 
    opacity: 0; 
    -webkit-transition: opacity 0.3s; 
    transition: opacity 0.3s; 
} 
.mydiv:hover { 
    opacity: 1; 
} 

Answer 5

Если div не виден, то он не получит событие. Как это можно? Если у него есть свойство display: none, где бы пользователь зависал, чтобы он стал видимым? Юо нужна цель.

Одна вещь, которую вы можете сделать, это иметь элемент цели, на который вы наводите курсор, и дочерний элемент div, который появляется при наведении указателя мыши.

Например: http://jsfiddle.net/frozenkoi/v37Tt/

HTML

<div id="master"> 
    hover for surprise! 
    <div id="popup"> 
     Happy surprise party! 
    </div> 
</div> 

CSS

#master { 
    border: 1px solid black; 
    background: pink; 
    width: 150px; 
} 

#popup { 
    border: 1px dotted red; 
    background: yellow; 
    display: none; 
    position: absolute; 
    top: 20px; 
    left: 20px; 
} 

#master:hover #popup { 
    display: block; 
} 

Что важно здесь то, что #masterdiv получает колебался, а правило для #popup ребенка подвешенного» ed #master видно.

Answer 6

Вам понадобятся два дивана. Один для ответа на событие hover и ваш оригинальный div.

Я собираюсь использовать jquery для примера.

 <div id="DivToRespondToMouseHover"> 
     Something to be hoverable. 
     </div> 
     <div class="mydiv"> 
     I am hidden until someone hovers over "DivToRespondeToMouseHover" 
     </div> 

     <script> 
     $(document).ready(function(){ 
      //When the document loads correct. Attach a hover event handler to 
      $("#DivToResponToMouseHover").hover(function(){ 
      $(".mydiv").show(); //Use the standard jQuery show 
      }); 
     }); 
     </script> 

Добавьте свои стили и все в порядке.
Почему это происходит: Но что-то, что не отображается, не может отвечать на события пользователя самостоятельно. Поскольку элемент на самом деле не существует, ничего не должно зависнуть. Пока он не станет видимым, он может не запустить это событие.

Любое использование JQuery действительно отлично подходит для этого материала (если вы еще не используете его).

Answer 7

Вам нужно, чтобы div был видимым, чтобы иметь возможность запускать события mouseover/hover в первую очередь. Рассмотрите возможность использования JavaScript (jQuery может это сделать), чтобы скрыть содержащиеся элементы внешнего div с фиксированным размером при наведении курсора мыши.

$('#parentDiv').hover(function(){ 
    $('#childDiv').show(); 
}); 

Answer 8

Yes ,You are near about to css.You have to find out at first the selector that means in which selector I have to use.Ok that means If I hover on body tag then all content will show. 
Below the code use and try to understand! 
<!DOCTYPE html> 
<head> 
    <meta charset="utf-8"> 
    <title>Margin Auto</title> 
    <style> 

.mydiv { 
     text-align:center; 
     font-size:30px; 
     color: #ffff00; 
     position:absolute; 
     width:680px; 
     height:180px; 
     z-index:15; 
     margin:0px auto; 
     background:#FF0000; 
     display:none; 
    } 
    #hoverme:hover .mydiv { 
     display:block; 
    } 


    </style> 

</head> 
<body> 
<div id="hoverme"> 
<p>Hover me</p> 
<div class="mydiv"> 

    Content goes here! 

</div> 
</div> 
</div> 
</body> 
</html>