当你徘徊某些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
});
});
我尝试了bind
到特定选择器,但它没有用。
当你悬停在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>
针对特定的div,给他们onmouseenter / onmouseleave事件:
#tail {
position: fixed;
}
.hidden {
display: none;
};
window.addEventListener("mousemove", function(e){
$('#tail').css({
left: e.pageX + 20,
top: e.pageY
});
});
var myDiv = document.getElementById('tail');
var targets = Array.from(document.getElementsByClassName('myTargets'));
targets.map(function(target){
target.addEventListener('mouseenter', function(){
document.getElementById('tail').classList.remove('hidden')
});
target.addEventListener('mouseleave', function(){
document.getElementById('tail').classList.add('hidden')
});
});