Setting the Cursor in the Element's Default Styles, or in Element:Hover

Should 'cursor' property be defined in '.class' or '.class:hover'?

The two selectors are for distinctly separate purposes, despite the fact that- at least in practice they appear to accomplish the same thing.

I would tend to say it would be best practice to define the hover state using :hover (at least on non-touchscreen devices, see below), because:

It makes finding and understanding your styling more apparent in larger blocks of CSS
It utilizes a specifically designated selector (which may be extended in the spec at a later date, what would then happen to your functionality?)
If you later add to the default styling for .class your states are clearly separated appropriately
What happens if you hand over responsibility of your CSS to another individual? Having :hover specific functionality defined under the correct selector makes understanding code a heck of a lot easier.
If you have more complex CSS its likely you'll be using :hover elsewhere, so should use it for the purposes of consistency
The two selectors represent the same element but in different states, semantically you should use :hover

But hang on a minute.. you may notice that if you set the cursor style for an a element to default then the usual hand icon wont appear on hover...this indicates that there is baked-in prior evidence for not specifically styling :hover states (see this in action here)

In summary, there is no game breaking reason not to use simply .class in some circumstances- it certainly uses less bytes and if you have a fairly simple setup then only under development by you...then why not, but be wary it is probably best avoided if you want to adhere to the strict rules and better support ongoing development.

In addition..lets not forget touchscreen devices MDN makes an important point here

on touch screens :hover is problematic or impossible. The :hover
pseudo-class never matches, or matches for a short moment after
touching an element. As touchscreen devices are very common, it is
important for web developer not to have content accessible only when
hovering over it, as this content would be hidden for users of such
devices.

As such depending on your requirement, it may not be best to use :hover as if you have it in your CSS for a touch screen device it may bake in reliance on unsupported or flakey functionality.

How to change the cursor into a hand when a user hovers over a list item?

In light of the passage of time, as people have mentioned, you can now safely just use:

li { cursor: pointer; }

How to edit cursor from a css ::first-letter element?

As MDN says:

Only a small subset of CSS properties can be used with the ::first-letter pseudo-element

cursor is not one of them.

Change the mouse cursor on mouse over to anchor-like style

Assuming your div has an id="myDiv", add the following to your CSS. The cursor: pointer specifies that the cursor should be the same hand icon that is use for anchors (hyperlinks):

CSS to Add

#myDiv
{
    cursor: pointer;
}

You can simply add the cursor style to your div's HTML like this:

<div style="cursor: pointer">

</div>

EDIT:

If you are determined to use jQuery for this, then add the following line to your $(document).ready() or body onload: (replace myClass with whatever class all of your divs share)

$('.myClass').css('cursor', 'pointer');

How to on hover of element style itself and another element

You can add styling to all children of the hovered element. Like this:

.tt {  border: 2px solid;  text-align: center;  padding:  0 0 3% 0;  cursor: pointer;}
.tt:hover b {  text-decoration: underline;}

<div class="tt">  <p>This text stays quiet</p>  <b>But this underlines</b> </div>

Hover Cursor CSS stops working once hovering over label or checkbox

.item:hover {
  background-color: #e4e8eb;
  border-radius: 10px;
}
.item *:hover {
  cursor: pointer;
}

Change style of one particular list item by hovering it - CSS

Here's an approach that seems to work. To explain:

li elements are explicitly given a font-weight: normal so that font-weight: bold on parents doesn't cascade.
A mouseover event handler is placed on the top level to handle all descendent events. The true useCapture parameter for addEventListener allows us to do this.
We allow the event to continue bubbling until we hit an li target.
We then programmatically set the font-weight for the li
By preventing further propagation, we make sure that parent li elements aren't notified when a descendent has already been bolded

const tree = document.getElementById('tree');tree.addEventListener('mouseover', (event) => {  if (event.target.tagName === 'LI') {    event.target.style.fontWeight = 'bold';    event.stopPropagation();  }}, true);tree.addEventListener('mouseout', (event) => {  if (event.target.tagName === 'LI') {    event.target.style.removeProperty('font-weight');  }}, true);

#tree li {  cursor: pointer;  font-weight: normal;}

<!DOCTYPE HTML><html><head>  <meta charset="utf-8">  <link rel="stylesheet" href="2.css"></head><body>
  <ul class="tree" id="tree">    <li>Animals      <ul>        <li>Mammals          <ul>            <li>Cows</li>            <li>Donkeys</li>            <li>Dogs</li>            <li>Tigers</li>          </ul>        </li>        <li>Other          <ul>            <li>Snakes</li>            <li>Birds</li>            <li>Lizards</li>          </ul>        </li>      </ul>    </li>    <li>Fishes      <ul>        <li>Aquarium          <ul>            <li>Guppy</li>            <li>Angelfish</li>          </ul>        </li>        <li>Sea          <ul>            <li>Sea trout</li>          </ul>        </li>      </ul>    </li>  </ul>
</body></html>

CSS - Custom cursor that changes depending on hovered element flickers when moving left to right but not right to left

That's because your mouse moves faster than the circle and you hover over it, so the styles that apply to it are the same ones than when the cursor is on the background green/blue-ish area of the page.

You can fix that by adding pointer-events: none to the circle so that it feels a bit like this:

poiner-events joke

Ok, where were we? Oh yes... So you should use position: fixed instead of absolute (as you really want your cursor to be positioned relative to the top-left corner of the viewport) and probably window.requestAnimationFrame to get a smoother animation and translate3d(0, 0, 0) to promote the element to its own layer and enable hardware-accelerated rendering, which will also contribute to make it feel smoother.

You could also hide the default cursor with cursor: none and center the circle where the arrowhead of the cursor is to make it feel just like a real cursor.

const circle = document.getElementById('circle');const circleStyle = circle.style;
document.addEventListener('mousemove', e => {  window.requestAnimationFrame(() => {    circleStyle.top = `${ e.clientY - circle.offsetHeight/2 }px`;    circleStyle.left = `${ e.clientX - circle.offsetWidth/2 }px`;  });});

body {  margin: 0;  height: 100vh;  background-color: #acd1d2;  position: relative;  display: flex;  justify-content: center;  align-items: center;  font-family: monospace;  cursor: none;}
#wrapper {  position: relative;  width: 70%;  height: 80%;}
#circle {  position: fixed;  border-radius: 50%;  z-index: 5;  height: 32px;  width: 32px;  background-color: white;  pointer-events: none;  transition:    background ease-in 10ms,    box-shadow ease-in 150ms,    transform ease-in 150ms;      /* Promote it to its own layer to enable  hardware accelerated rendering: */  transform: translate3d(0, 0, 0);}
.box {  height: 25%;  margin: 0;  display: flex;  justify-content: center;  align-items: center;  }
#box-1 {  background-color: #e8edf3;}  #box-1:hover ~ #circle {  background-color: #e6cf8b;  box-shadow: 0 0 0 0 transparent, inset 0em -0.3em 0.4em 0.2em #ca9e03a6;}
#box-2 {  background-color: #e6cf8b;}  #box-2:hover ~ #circle {  background-color: transparent;  /* Use box-shadow instead of border to avoid changing the dimensions of the     cursor, which will make it be off-center until the mouse moves again: */  aborder: 3px solid #E91E63;  box-shadow: 0 0 0 3px #E91E63;}
#box-3 {  background-color: #b56969; }  #box-3:hover ~ #circle {  background-color: #e6cf8b;  /* Change its size with scale() instead of width and height for better     performance performance: */  transform: scale(0.5) translate3d(0, 0, 0);} 
#box-4 {  background-color: #22264b;  color: white;}
#box-4:hover ~ #circle {  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);}

<div id="wrapper">  <div id="box-1" class="box">Sphere</div>  <div id="box-2" class="box">Circle outline</div>  <div id="box-3" class="box">Circle pin</div>  <div id="box-4" class="box">Circle color gradient</div>    <div id="circle"></div></div>