Question

我是制作动画的新手，我有几个div包含一个img in css 所以

.div1 {
background: url(path to the img);
}

当我在悬停时，当我试图制作时消失，当光标没有悬停时，它应该重新出现

这是我的jquery

$("#text_container").hide();

$(".hide_container").mouseenter(function(){
    $(this).fadeTo(5000,0);
    $("#text_container").fadeIn(5000);
});

$(".hide_container").mouseleave (function(){
    $(this).fadeTo(5000,1);
    $("#text_container").fadeOut(5000);
});

HTML

 <div class="hide_container">             
               <div id="eyes_container">
                    <div id="left_container">
                       <div class="left_eyebrow"></div>
                       <div class="eye_left"></div>
                    </div> 

                    <div id="right_container">
                       <div class="right_eyebrow"></div>
                       <div class="eye_right"></div>
                    </div>
                </div>

                <div id="top_eyes_container">
                     <div class="top_eyes"></div>
                </div>



                <div id="arms_container">
                    <div class="left_arm">
                        <div class="h">
                            Hover
                        </div>
                    </div>

                    <div class="right_arm">
                        <div class="os">
                            Over Steve
                        </div>
                    </div>
                    <img class="steve_jobs" src="images/steve_jobs.png" width="557" alt="">
                </div>
                </div>
                <div id="glasses_container">
                    <div class="glasses"></div>
                </div>

                <div id="text_container">
                    <div class="g_a"></div>
                    <div class="gle_a"></div> 
                </div>

我试过.stop（）但是因为我不知道我要把它放在哪里，所以它可能是错误的元素。

我遇到的问题是，当我将鼠标悬停时，它会消失但是当鼠标停留在原位时它会重新出现并不断重复

我希望有人可以帮我解决这个问题。

问候语 Ditger

Answer 1

你只能用css做到这一点。请参阅下面的代码段

首先将opacity:0设置为#text_container以将其隐藏起来，然后在悬停时，使用.hide_container并使用通用兄弟连接器opacity:0使~不可见您将.hide_container:hover与#text_container联系起来（它们在HTML中属于同一级别，因此兄弟姐妹）

＆＃13;

#text_container {
	opacity:0;
}
.hide_container:hover {
	opacity:0;
}
.hide_container:hover ~ #text_container {
	opacity:1;
}
#text_container,.hide_container {
	transition:5s ease-out;
}

＆＃13;

<div class="hide_container">
  <div id="eyes_container">
    <div id="left_container">
      <div class="left_eyebrow"></div>
      <div class="eye_left"></div>
    </div>

    <div id="right_container">
      <div class="right_eyebrow"></div>
      <div class="eye_right"></div>
    </div>
  </div>

  <div id="top_eyes_container">
    <div class="top_eyes"></div>
  </div>



  <div id="arms_container">
    <div class="left_arm">
      <div class="h">
        Hover
      </div>
    </div>

    <div class="right_arm">
      <div class="os">
        Over Steve
      </div>
    </div>
    <img src="http://placehold.it/350x150">
  </div>
</div>
<div id="glasses_container">
  <div class="glasses"></div>
</div>

<div id="text_container">
  <div class="g_a">a</div>
  <div class="gle_a">a</div>
</div>

＆＃13;

Jquery fadeTo，fadeIn不断重复自我

1 个答案: