JQuery hover - открыть всплывающее окно

Ну, я пытаюсь создать кнопку, которая, когда пользователь на нее наведет, отобразит контейнер, в котором есть текст. И мне интересно, возможно ли, чтобы контейнер, который всплывает, остается открытым, если вы зависаете до него.JQuery hover - открыть всплывающее окно

Он похож на this question:

Однако ответ на эту нить мне не помогает, так как он не решает проблему.

Мой код:

HTML:

<a href="#contact"> 
    <div class="button"> 
     <div class="button-text contactme"> 
      Contact me 
     </div> 
    </div> 
</a> 
<div class="emailcontainer"> 
    [email protected] 
</div>

CSS:

.emailcontainer { 
    display:none; 
    color:#fff; 
    border:solid 1px #fff; 
    padding:10px; 
    padding-left:50px; 
    padding-right:50px 
} 

.button-text { 
    padding:0 25px; 
    line-height:56px; 
    letter-spacing:3px 
} 

.button-text.contactme { 
    font-weight:20px 
}

JQuery:

$(document).ready(function(){ 
    $(".button-text.contactme").hover(function() { 
    $('.emailcontainer').show('slow') 
},function() { 
    $('.emailcontainer').hide('slow') 
    }); 
});

источник

2015-05-06 Anonymous

Что вы подразумеваете под «зависанием»? Вы хотите открыть всплывающее окно, когда наводите курсор на кнопку и держите ее открытой, когда вы наведете указатель? Если да, как вы хотите закрыть всплывающее окно? – newmediafreak

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

Как насчет перемещения '.emailcontainer' внутри вашей кнопки div? https://jsfiddle.net/samuraii/yqj7zjjp/ – Samurai

попробовать this

Обновить код JQuery как:

$(document).ready(function(){ 

$(".button-text.contactme, .emailcontainer").hover(function() { 
    $('.emailcontainer').show('slow') 
},function() { 
     setTimeout(function() { 
     if(!($('.emailcontainer:hover').length > 0)) 
      $('.emailcontainer').hide('slow'); 
     }, 300); 
    }); 
});

Надеюсь, что эта помощь !!!

источник

2015-05-06 19:02:14 gamini2006

Почему вы пытаетесь изобрести колесо, имеют вид Qtip с истинностью функции:

http://qtip2.com/demos

источник

2015-05-06 18:24:16

Я ваш класс emailcontainer в CSS, удалите color:#fff;, потому что он белый. Или вы можете изменить цвет, который не является белым см скрипки здесь: https://jsfiddle.net/tn5wy5dk/1/

источник

2015-05-06 18:30:52

Также обратите внимание, что я удалил 'display: none;' от CSS и добавил этот стиль к тегу DIV в HTML –

Как это ответ на вопрос? Кроме того, почему OP должен это делать? Вероятно, есть темный фон, так что вы можете увидеть белое граничное всплывающее окно с белым текстом в нем. – newmediafreak

вы можете использовать MouseOver и MouseOut https://api.jquery.com/mouseover/ Если у вас нет кнопки закрытия кросса/на всплывающем окне, то вы можете использовать MouseOut для сокрытия всплывать

источник

2015-05-06 18:32:57 ShazebAli

jsfiddle DEMO

Вы можете перемещать .emailcontainer внутри кнопки DIV так что это доля парения даже ничего лишнего необходимо:
```
<div class="button-text contactme"> 
    Contact me 
    <div class="emailcontainer">[email protected]</div> 
</div> 
```
Если вы хотите, чтобы это было всплывающее окно, вам необходимо установить контейнер, чтобы иметь position: relative и всплывающее окно, чтобы иметь position: absolute;:
```
.button-text.contactme { 
    position: relative; 
} 
.emailcontainer { 
    position: absolute; 
    top: 40px; 
    left: 20px; 
    /* the rest of styles */ 
} 
```
Я не думаю, что 50px является собственным значение для font-weight. Вы либо предназначены для использования font-size: 50px; или что-то вроде font-weight: bold;.

источник

2015-05-06 18:49:55 Samurai

HTML КОД

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Accordion - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="app2.js"></script> 

<style> 
.emailcontainer { 
    display:none; 
    color:blue; 
    border:solid 1px black; 
    padding:10px; 
    padding-left:50px; 
    padding-right:50px 
} 

.button-text { 
    padding:0 25px; 
    line-height:56px; 
    letter-spacing:3px 
} 

.button-text.contactme { 
    font-weight:20px 
} 

</style> 
</head> 

<body> 
    <a href="#contact"> 
     <div class="button"> 
     <div class="button-text contactme"> 
       Contact me 
      </div> 
     </div> 
    </a> 
    <br/> 
    <div id="emailcontainerdiv" class="emailcontainer"> 
     [email protected] 
    </div> 




</body> 
</html>

Javascript

$(document).ready(function(){ 
    $(".button-text.contactme").hover(function() { 
     $('#emailcontainerdiv').show(); 
     },function() { 
    $('#emailcontainerdiv').show(); 
    }); 
});

источник

2015-05-06 19:00:01

JQuery hover - открыть всплывающее окно

ответ

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