Question

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

＆＃13;

Preparing to unpack .../ttf-mscorefonts-installer_3.4+nmu1ubuntu2_all.deb ...
debconf: unable to initialize frontend: Dialog
debconf: (TERM is not set, so the dialog frontend is not usable.)
debconf: falling back to frontend: Readline
Configuring ttf-mscorefonts-installer

TrueType core fonts for the Web EULA END-USER LICENSE AGREEMENT FOR 
MICROSOFT SOFTWARE
...
Do you accept the EULA license terms? [yes/no]

＆＃13;

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

＆＃13;

Answer 1

不确定你想要获得什么，但你可能缺少的是隐藏元素之前你要淡化它

＆＃13;

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

＆＃13;

#spon_detail{
  display:none;
}

＆＃13;

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

＆＃13;

Answer 2

您忘记在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 3

我认为您错过了在.st_inner img功能上添加mouseout。

＆＃13;

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

＆＃13;

#spon_detail{
  display: none;
}

＆＃13;

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

＆＃13;

您还可以查看此https://jsfiddle.net/a6ekejz5/1/

希望这会对你有所帮助。

jQuery mouseout效果不起作用。

3 个答案: