javascript - jQuery mouseout 效果不起作用。!

Question

我正在开发一个 slider ，当鼠标悬停在 Logo 上时，详细信息将显示，而当鼠标悬停在其父 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>