Question

我只是尝试为我的投资组合创建一个输入页面。一切看起来都不错，但我的jquery-code无法正常工作。

我想用内容＆＃34; Music＆＃34; fadeToggle 2 box和＃34;网页设计＆＃34;当在屏幕中间盘旋一圈时。 div.hidden元素位于Circle元素中。

现在，当我盘旋圆圈时，它渐渐消失，当我离开圆圈时，它逐渐淡出。问题：当我将光标移动到其中一个新的＆＃34;隐藏的＆＃34; -box中时，它们会淡出，因为我离开了圆形元素？

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

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

Answer 1

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

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

jquery fadeToggle与子对象？

1 个答案: