CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4708518
user4708518

Reputation:

Jquery hover - keep popup open

Well, I am trying to make a button which, when a user hovers on it, will display a container which has text in it. And I am wondering if it is possible to have the container which pops up stays open if you hover down to it.

It is similar to this question:

However the answer on that thread does not help me, as it does not solve the issue.

My code:

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')
    });  
});

Upvotes: 3

Views: 17639

Answers (6)

gamini2006
gamini2006

Reputation: 299

try this

Update your jQuery code as:

$(document).ready(function(){

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

Hope this help!!!

Upvotes: 4

Ritesh Karwa
Ritesh Karwa

Reputation: 2254

HTML CODE

<!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();
     });  
 });

Upvotes: 0

Samurai
Samurai

Reputation: 3729

jsfiddle DEMO

  1. You can move the .emailcontainer inside your button div so it'll share the hover even nothing extra needed:

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

  2. If you want it to be popup, you need to set the container to have position: relative and the popup to have position: absolute;:

    .button-text.contactme {
    position: relative;
}
.emailcontainer {
    position: absolute;
    top: 40px;
    left: 20px;
    /* the rest of styles */
}

  3. I don't think 50px is a proper value for font-weight. You either meant to use font-size: 50px; or something like font-weight: bold;.

Upvotes: 0

ShazebAli
ShazebAli

Reputation: 19

you may use mouseover and mouseout https://api.jquery.com/mouseover/ If you do not have a cross/close button on the popup then you can use mouseout for hiding the popup

Upvotes: 0

The Guest
The Guest

Reputation: 708

I your emailcontainer class in CSS, remove the color:#fff;, because it is white. Or you can change the color which is not white see fiddle here: https://jsfiddle.net/tn5wy5dk/1/

Upvotes: 0

Raza Hussain
Raza Hussain

Reputation: 762

Why you are trying to reinvent the wheel, have a look Qtip with verity of feature:

http://qtip2.com/demos

Upvotes: 0

Related Questions