CSS

[Solved-9 Answers] How to change the cursor into hand when a user hovers over a list item

  • We got a list, and we had a click handler for its items:
mouse pointer code
<ul>
  <li>foo</li>
  <li>goo</li>
</ul>
  • How to change the mouse pointer into a hand pointer (like when hovering over a button)? Right now the pointer turns into a text selection pointer during hover over the list items.

  • The”mousechange” treatment using CSS:
mouse pointer code
<style type="text/css">
    .mousechange:hover 
{
        cursor:pointer;
}
</style>
<span class="mousechange">Some text here</span>

  • Using anchor tag:
  • <a><i class=”uk-icon-hover uk-icon-info-circle uk-icon-medium “data-uk-tooltip=”{pos:’right’}” title=”Some Tooltip Here”
    aria-hidden=”true”></i><a>

Using CSS :

mouse cursor
li:hover 
{
    cursor: pointer;
}

  • Using cursor,
mouse cursor

cursor: pointer;
cursor: hand;

cursor download code
li:hover 
{
cursor: hand; cursor: pointer;
}

cursor download
<style>
li:hover
{
    cursor: hand;
}
</style>

  • Css code:
download mouse pointers code
label.autor
{
cursor:pointer;
}

  • use the CSS property cursor
download mouse pointers code
.mouse-invisible 
{
  cursor: none;
  width: 200px;
  height: 200px;
  background: red;
}
div 
{
  display: inline-block;
}
<div class="mouse-invisible">
  Dare to Hover !!!
</div>

  • using javascript to add the css to the element

 

javascript code
$("li").css({"cursor":"pointer"});
Or when modernizer in combination with <html class="no-js"> is used,
.js li { cursor: pointer; }
  • This article provides some of the basic informations on mouse pointer , mouse cursor , animated cursors , mouse pointers for windows 7 , mouse pointers for windows 10 , mouse cursors for windows 7 , database cursor , cursor mania , cursor download , mouse pointer download , pointer , mouse cursor download , download mouse pointers , how to change mouse pointer.
See also  [ Solved -4 Answers ] HTML - CSS - Align img to bottom of div

About the author

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment

X