jQuery mouseout效果不起作用。

Question

我正在制作一个滑块，当鼠标悬停在徽标上时，细节会显示，当鼠标悬停在其父div上时，它应该隐藏。

jQuery('.st_inner img').mouseover(function() {
  jQuery(this).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.sponsor_thumb').mouseout(function() {
  jQuery('#spon_detail').fadeOut();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
  <div class="st_inner">
    <img src="https://placehold.it/200x50">
  </div>
  <div id="spon_detail">
    <div id="dt_inner">
      <h4>Company Profile</h4>
      <?php 
              echo $spon_key;
            ?>
    </div>
  </div>
</div>

Answer 1

你忘了在img元素上添加这个类。使用sponsor_thumb类没有元素

jQuery('.st_inner img').mouseover(function(){
  jQuery( this ).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.key_val').mouseleave(function(){
  jQuery('#spon_detail').fadeOut();
});

.key_val{
  width : 400px;
  height : 400px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
    <div class="st_inner">
        <img class="sponsor_thumb" src="<?php echo $post_thumb ?>">
    </div>
    <div id="spon_detail" style="display:none">
        <div id="dt_inner">
            <h4>Company Profile</h4>                       
        </div>
    </div>
</div>

Answer 2

不确定你想要实现什么，但你可能缺少的是在你想要淡入它之前隐藏元素

jQuery('.st_inner img').mouseover(function(){
  jQuery( this ).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.sponsor_thumb').mouseout(function(){
  jQuery('#spon_detail').fadeOut();
});

#spon_detail{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
    <div class="st_inner">
        <img src="<?php echo $post_thumb ?>">
    </div>
    <div id="spon_detail">
        <div id="dt_inner">
            <h4>Company Profile</h4>
            <?php 
              echo $spon_key;
            ?>                                  
        </div>
    </div>
</div>

Answer 3

我想你错过了在.st_inner img函数上添加mouseout。

jQuery('.st_inner img').mouseenter(function() {
  jQuery(this).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.key_val').mouseleave(function() {
  jQuery('#spon_detail').fadeOut();
});

#spon_detail{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
  <div class="st_inner">
    <img src="https://dummyimage.com/300.png/09f/fff">
  </div>
  <div id="spon_detail">
    <div id="dt_inner">
      <h4>Company Profile</h4>      
    </div>
  </div>
</div>

你也可以查看这个https://jsfiddle.net/a6ekejz5/1/

希望这会帮助你。