How to create a mouse over or hover, which will tr

Question

How to create a mouse over or hover, which will trigger a pop up a div with three links?

see the image : http://postimg.org/image/d8lhmhoh7/

a link is there "login", when a user mouseover a rectangular pop up box will appear with three links or image with a link. when user mouse out the pop up will disappear.

Answer 1

I recently did this using pure CSS, with the addition of a script to insure iOS compatability.

This question addresses it in a way I ended up basing my process on, though I ended up going with a class instead of an id in my situation, but it worked just as well.

.container > div {
    display: none
}
.container > div:first-child {
    display: block
}
.container:hover > div {
    display: block
}

For iOS compatability, I used this:

<script type='text/javascript'>

$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".hoverclasshere div").click(function(){
// Update class to point at the head of the list
});

}

});

</script>

If you are not already using jQuery on your site, you'll have to be sure to include it before using this script.

Answer 2

You can achieve it only in CSS as well. Do the following: Create nested divs, hide the div which is inside (display:none), this one should contain the three links. Then use the :hover pseudo selector in CSS and make the hidden div visible by setting the display to block (display:block) when the user mouseovers your parent div.

This is very high level, This looks similar to creating dropdown menus so may be you can read about how to do that.

Answer 3

-- try this

  .tools-Tips
   {
display:none;
height: 20px;
padding: 10px;
position: fixed;
background-color: #F2F2F2;
left: 70px;
font-family: arial, Helvetica, sans-serif;
font-size: 14px;
color: #003366;
border-radius: 9px 9px 9px 9px;
font-weight: bold;
box-shadow: 0 5px 11px -2px #6F9FAB;
width:auto;
  }

   <div id="myElement" >mouse here</div>
   <div id='toolsTips' class='tools-Tips'></div>

 <script type="text/javascript">

 $('#myElement').mousemove(function (e) {
    var ht = '<div><a href="#">links</a>write what you want<div>';
    $('#toolsTips').html(ht).show().css({ 'top': (e.clientY + 'px'), 'left': ((e.clientX + 20) + 'px') });

 }).mouseleave(function () {
    $('#toolsTips').hide();
 });

 </script>