Пользовательский курсор в html

Question

Я хочу добавить изображение в качестве курсора внутри div, но я хочу, чтобы он спрятался и имел обычный курсор указателя, когда мышь нависает над любой связью внутри этого div.
я писал:

var $box = $(".box"); 
 
var $myCursor = $("#myCursor"); 
 
var button1 = $("#link1"); 
 
var button2 = $("#link2"); 
 
$box.on("mouseleave",function(){ 
 
    $myCursor.hide(); 
 
}) 
 
$box.mousemove(function(e){ 
 
    $myCursor.css('top',e.pageY); 
 
    $myCursor.css('left',e.pageX); 
 
    if (!button1.is(":hover") && (!button2.is(":hover"))){ 
 
    $myCursor.show(); 
 
    } 
 
    else if(button1.is(":hover") || (button2).is(":hover")){ 
 
    $myCursor.hide(); 
 
    } 
 
    if(e.clientX<$box.width()*0.5){ 
 
     $myCursor.css('transition','transform 1s'); 
 
     $myCursor.css('transform','rotate(-270deg)'); 
 
     } 
 
     else if(e.clientX>$box.width()*0.5){ 
 
     $myCursor.css('transition','transform 1s'); 
 
     $myCursor.css('transform','none'); 
 
     } 
 

 
});

.box{ 
 
    height:100vh; 
 
    background:#ccc; 
 
    padding-top:50px; 
 
    cursor:none; 
 
    
 
} 
 
button{ 
 
    display:block; 
 
    margin:15px auto; 
 
    width:20%; 
 
    padding:10px; 
 
    cursor:pointer; 
 
} 
 
#myCursor{ 
 
    position:absolute; 
 
    height:50px; 
 
    width:50px; 
 
    top:0; 
 
    left:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class = "box"> 
 
    <button id = "link1">Some link</button> 
 
    <button id = "link2">Another Link</button> 
 
    <img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png"> 
 
</div>

Как я осуществить это правильно? Спасибо

Answer 1

Самое простое решение просто настроить область видимости ваших селекторов:

var $box = $(".box:not(button)"); поэтому переключатель изображения вызывается всякий раз, когда курсор находится не над кнопкой. Однако в вашем случае вам следует уменьшить размер изображения, чтобы он был ближе к размеру мыши - так как есть большое перекрытие изображения и кнопки до того, как сам указатель мыши закроет кнопку.

Более сложное решение предполагает использование массивов для регистрации координат и размеров кнопок, а затем с использованием mousemove и each для постоянного контроля ширины координаты изображения с размерами хранимых кнопок, но в зависимости от того, что у вас есть, быть хитом производительности.

Если вы добавили pointer-events: none в код #myCursor, вы предотвращаете случайное мгновенное затемнение курсора от кнопки самим изображением - следовательно, лучшее качество.

var $box = $(".box:not(button)"); 
 
var $myCursor = $("#myCursor"); 
 
var button1 = $("#link1"); 
 
var button2 = $("#link2"); 
 
$box.on({ 
 
\t mouseleave:function(){ 
 
    \t  $myCursor.hide(); 
 
\t }, 
 
    mousemove: function(e){ 
 
    \t $myCursor.css({ 'left':e.pageX, 'top':e.pageY }); 
 
    \t if (!button1.is(":hover") && !button2.is(":hover")){ 
 
    \t $myCursor.show(); 
 
    \t } else if(button1.is(":hover") || (button2).is(":hover")){ 
 
    \t $myCursor.hide(); 
 
    \t } 
 
    } 
 
});

.box{ 
 
    height:100vh; 
 
    background:#ccc; 
 
    padding-top:50px; 
 
    cursor:none; 
 
    
 
} 
 
button{ 
 
    display:block; 
 
    margin:15px auto; 
 
    width:20%; 
 
    padding:10px; 
 
    cursor:pointer; 
 
} 
 
#myCursor{ 
 
    position:absolute; 
 
    height:50px; 
 
    width:50px; 
 
    top:0; 
 
    left:0; 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class = "box"> 
 
    <button id = "link1">Some link</button> 
 
    <button id = "link2">Another Link</button> 
 
    <img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png"> 
 
</div>

Answer 2

Вы можете решить это с помощью CSS, вам не нужно javascript. Посмотрите здесь: http://www.w3schools.com/cssref/pr_class_cursor.asp

Вы можете установить классы CSS с помощью JavaScript, чтобы включить какую-то зависимость к другим элементам.

Answer 3

Намного легче добиться использования только CSS. Вам придется изменить размер изображения курсора заранее, в этом примере я изменил размер одного на 50x50 пикселей (другой в белом поле - 64x64).

, auto является обязательным и определяет замену.

.box{ 
 
    height:100vh; 
 
    background:#ccc; 
 
    padding-top:50px; 
 
    cursor: url(//codestylers.de/rifle.png), auto; 
 
} 
 
button{ 
 
    display:block; 
 
    margin:15px auto; 
 
    width:20%; 
 
    padding:10px; 
 
    cursor: pointer; 
 
} 
 

 
.another-cursor { 
 
    background-color: white; 
 
    width: 300px; 
 
    height: 200px; 
 
    cursor: url(//codestylers.de/cursor.png), auto; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class = "box"> 
 
    <button id = "link1">Some link</button> 
 
    <button id = "link2">Another Link</button> 
 
    <div class="another-cursor"></div> 
 
</div>