Curseur personnalisé en html

Question

Je veux ajouter une image comme mon curseur dans un div, mais je veux qu'il se cache et avoir un curseur de pointeur normal, lorsque la souris survole l'un des liens à l'intérieur de ce div.
j'ai écrit:

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>

Comment puis-je mettre cela correctement? Merci

Answer 1

La solution simple est juste pour régler la portée de vos sélecteurs:

var $box = $(".box:not(button)"); de sorte que le commutateur d'image est appelée à chaque fois que le curseur n'est pas sur un bouton. Cependant, dans votre cas, vous devriez envisager de réduire la taille de l'image afin qu'elle soit plus proche de la taille de la souris - car il y a un grand chevauchement de l'image et du bouton avant que le pointeur de la souris couvre le bouton. Une solution plus complexe consisterait à utiliser des tableaux pour enregistrer les coordonnées et les dimensions des boutons, puis en utilisant mousemove et each pour vérifier en permanence les largeurs des coordonnées de l'image par rapport aux dimensions des boutons stockés, mais en fonction de ce que vous pourriez faire d'autre. être un succès de performance.

Si vous ajoutez pointer-events: none au css #myCursor vous évitez l'occultation momentanée du curseur du bouton par l'image elle-même - d'où une meilleure performance.

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

Vous pouvez résoudre ce problème en utilisant CSS, pas besoin de javascript. Jetez un coup d'oeil ici: http://www.w3schools.com/cssref/pr_class_cursor.asp

Vous pouvez définir des classes CSS avec l'aide de javascript pour permettre une sorte de dépendance à d'autres éléments.

Answer 3

Beaucoup plus facile à réaliser en utilisant CSS seulement. Vous devrez d'abord redimensionner l'image du curseur, dans cet exemple j'ai redimensionné un à 50x50 pixels (l'autre dans la boîte blanche est 64x64). Le code , auto est obligatoire et définit un repli.

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