0

アイコンのマウスオーバーとマウスアウトでフェードインおよびフェードアウトする必要があるユーザーメニューがあります。私の問題は、ユーザーがメニュー (またはこの場合は img) にカーソルを合わせることができ、メニューがフェードアウトしないようにして、リンクや画像をクリックできるようにすることです。これが私のコードとjsfiddleです。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>
4

1 に答える 1

0

これはあなたを助けるでしょう。JSFiddleデモを見る

HTML

<div class='parent'>
   <a class="notif" href="notifications.html" style="text-decoration:none;"><img src="http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg" height="30" width="30"/></a>

   <div class="notif" style="z-index:999999; ">
      <a href="notifications.html"><img src="http://doinghistoryproject.tripod.com/sitebuildercontent/sitebuilderpictures/failure-message.gif" height="80" width="80"/></a>
   </div>
</div>

JS

$(document).ready(function () {
    $(".parent").hover(
    function () {
       $(this).find('div.notif').stop().fadeIn('slow');
    },
    function () {
       $(this).find('div.notif').stop().fadeOut('slow');
    });
});
于 2013-01-23T17:57:15.037 に答える