I'm working on creating user menus that have a fade in and out effect when hovering over an icon. However, I want the menu to remain visible if the user hovers over it or the image within it. Below is my code snippet along with a jsfiddle demo: http://jsfiddle.net/anschwem/7mrM2/
<style>
div.notif
{
display:none;
position:absolute;
border:solid 1px black;
padding:8px;
background-color:white;
}
a.notif:hover + div.notif
{
display:block;
}
div.notif:hover
{
display:block;
}
</style>
<script type='text/javascript'>//NOT WORKING
$(window).load(function(){
$(document).ready(function()
{
$(".notif").hover(
function () {
$('.notif').fadeIn('slow');
},
function () {
$('.notif').fadeOut('slow');
}
);
});
});//]]>
</script>//NOT WORKING
</head>
<body>
<a class="notif" href="notifications.html" style="text-decoration:none;"><img src="images/bubble.png" style="position:relative; top:20px;"/></a>
<div class="notif" style="z-index:999999; ">
<a href="notifications.html"><img src="images/notif.png"/></a>
</body>