Div следующий указатель при наведении - PullRequest
Новая
       10

Div следующий указатель при наведении

3 голосов
/ 18 апреля 2019

Я хочу показать плавающий элемент 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 и снова появиться при наведении на него.

Ответы [ 2 ]

5 голосов
/ 18 апреля 2019

Просто установите div display на none, когда мышь уходит, и display 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>
1 голос
/ 18 апреля 2019

Таргетинг на конкретные элементы 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')
    });
});
...