jquery fade使用子对象切换？

我只是试图为我的投资组合创建一个enterpage。一切看起来不错，但我的jQuery代码将无法正常工作。jquery fade使用子对象切换？

我想在屏幕中间的一个圆圈上徘徊时，用内容“音乐”和“网页设计”淡入淡出2个框。 div.hidden元素是IN Circle元素。

现在，当我将鼠标悬停在圆上时，它会消失，当我离开圆环时，它会消失。问题：当我将光标移动到一个新的“隐藏”框中时，它们会因为我离开了圆形元素而淡出？

你能帮我解决这个问题吗？这里是我的代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     console.log('DOM READY'); 

     $('#me').mouseover(function() { 
     $('.hidden').fadeIn(1000); 
     }); 

     $('#me').mouseout(function() { 
     $('.hidden').fadeOut(1000); 
     }); 

    }); 
</script>

HTML：

<!DOCTYPE HTML>  
<html> 
    <head> 
     <title>DominikBiedebach - Web- und Printdesigner</title> 
     <style type="text/css"> 
     @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700|Open+Sans+Condensed:300,700); 

     html, body { background: #f4f4f4; color: #202020; } 
     div#me{ 
      background: url(images/me.png) no-repeat; 
      height: 256px; 
      width: 256px; 
      margin: 40px auto 10px auto; 
      position: relative; 
     } 
     div#container{ 
      width: 960px; 
      margin: 0px auto; 
      text-align: center; 
     } 
     h1 { 
      font-size: 100px; 
      font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif; 
      margin: 0px; 
     } 
     h3 { 
      font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
      font-size: 30px; 
      line-height: 26px; 
      text-transform: uppercase; 
     } 

     .hidden { display: none; } 
     #music { 
      position: absolute; 
      left: -200px; 
      width: 200px; 
      height: 400px; 
     } 

     </style> 
    </head> 
    <body> 
     <div id="container"> 
     <div id="me"> 
      <div class="hidden" id="music">Testbox</div> 
      <div class="hidden" id="webdesign">Testbox</div> 
     </div> 

     <h1>xxxx</h1> 
     <h3>xxxx</h3> 
     </div> 
    </body> 
</html>

来源

2012-10-29 vcs

你可以尝试用mouseenter/mouseleave更换mouseover/mouseout或使用hover方法：

$('#me').hover(function() { 
    $('.hidden', this).fadeToggle(1000); 
});

来源

2012-10-29 00:17:51 undefined

谢谢，我会努力比给你的反馈。我是jQuery新手，所以我必须阅读更多关于事件和选择器的内容。 :) – vcs

谢谢，mouseenter和mouseleave帮助了我很多！ – vcs

jquery fade使用子对象切换？

回答

相关问题