Search code examples
javascriptcsscursor

Change mouse cursor on button - normal to pointer


I have created on my site in js a "right side sliding menu". It works and everything is okay but when I direct my mouse over the menu icon, it shows me a normal cursor (look at the picture in link). I need a pointer cursor without add any links.

#buttonu5815{

      transition-property: top;
      transition-duration: 0.2s;
      transition-timing-function: ease;

      -webkit-transition-property: top;
      -webkit-transition-duration: 0.2s;
      -webkit-transition-timing-function: ease;
   }

var theMenu;
var originLeft;

window.onload = function() {
   //Click to open on the Muse Icon
   element = document.getElementById("buttonu5717");
   element.onclick = openMenu;

   //save the Left position
   originLeft = document.getElementById("buttonu5815").style.top;
   //Get the Menu element
   theMenu = document.getElementById("buttonu5815");

   //Click to close
   closeBtn = document.getElementById("buttonu5822");
   closeBtn.onclick = closeMenu;
}

function openMenu(){
   theMenu.style.top = 0;
}

function closeMenu(){
   theMenu.style.top = originLeft;
}

Solution

  • I think this CSS is what you're looking for.

    #buttonu5815:hover {
       cursor:pointer;
    }