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.
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.
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.
-- 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>
