Jquery fadeTo、fadeIn 不断重复出现

Question

我有几个 div 包含 css 中的 img 所以

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

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

Answer 1

你只能使用 css 来做到这一点。请参阅下面的片段

首先将

opacity:0

设置为

#text_container

以将其隐藏在视图中，然后在悬停时，使用

.hide_container

使

opacity:0

不可见，并使用通用兄弟连接器

~

将

.hide_container:hover

与

#text_container

连接（它们是在 HTML 中处于同一级别，因此是兄弟）

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

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