javascript – 在悬停时Div指针

当你徘徊某些div时,我想显示一个跟随指针的浮动div,到目前为止,我发现这段代码的jquery在悬停整个身体时起作用,但我想要的是处理某些div:

CSS

<div id="tail">mouse tail</div>

jQuery的

$(document).bind('mousemove', function(e){
    $('#tail').css({
       left:  e.pageX + 20,
       top:   e.pageY
    });
});

我尝试绑定到特定的选择器,但它不起作用.

当你徘徊在div之外时div应该消失,当你盘旋时重新出现.

解决方法:

只需在鼠标离开时将div显示设置为none,并在进入时将其显示为block

$('.something').bind('mousemove', function(e){
    $('#tail').css({
       left:  e.pageX + 20,
       top:   e.pageY
    });
});

$('.something').bind('mouseleave', function(e){
    $('#tail').css({
       display:  'none'
    });
});
$('.something').bind('mouseenter', function(e){
    $('#tail').css({
       display:  'block'
    });
});
#tail {
  position: fixed;
  display: none;
}

.something {
  width: 200px;
  height: 160px;
  background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tail">mouse tail</div>

<div class='something'> stuff </div>
上一篇:前端 显示与隐藏


下一篇:css3新加模块 a标签伪类选择器 过渡模块 渐变 弹性 手风