I set cursor: pointer
for .about > span
, but when my mouse hovers on those texts in <span>
, the cursor does not change into pointer mode. I would like to know why it is not working.
HTML:
<div id="firstdiv">
<div id="intro">
<h1 id="name">YOU CHIA LAI</h1>
<ul>
<li class="about">I am a Master of <span>Architecture</span>
candidate at Rice University.
</li>
<li class="about">I am also interested in <span>photography</span> &
<span>web design</span>.</li>
<li class="about">I wish you can know more <span>about</span> me.
</li>
</ul>
</div>
</div>
CSS:
#firstdiv {
position:fixed;
top:0;
left:0;
right:0;
height:100%;
width:100%;
margin:auto;
background:#E6E6E6;
text-align:center;
font-size:0;
z-index:-2
}
.about > span {
cursor:pointer;
font-family:Eurofurence Light;
padding:0 0 3px 0;
color:#01DFA5;
}
Check that the battery of the mouse is charged. Make sure that the receiver (dongle) is firmly plugged in to the computer. If your mouse and receiver can operate on different radio channels, make sure that they are both set to the same channel.
You can simply use the CSS cursor property with the value pointer to change the cursor into a hand pointer while hover over any element and not just hyperlink. In the following example when you place the cursor over the list item, it will change into a hand pointer instead of the default text selection cursor.
Once you're in Mouse settings, select Additional mouse options from the links on the right side of the page. In Mouse Properties, on the Pointer Options tab, at the bottom, select Show location of pointer when I press the CTRL key, and then select OK. To see it in action, press CTRL.
The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set.
I messed with my css for hours, changing the positioning and z-index of just about every element on the page. I deleted every other element from the DOM except for the one with the cursor: pointer on hover, and it STILL didn't work.
For me, on Mac OSX El Captain V 10.11, the issue had to do with some sort of interference with Photoshop CC. Once I closed Photoshop, the cursor started working again.
Solution for me: Close and reopen Photoshop
Apparently this can happen due to many different programs including Photoshop, Sketch, DataGrip, Acrobat, Sublime Text, etc.
You need to change the z-index so that #firstdiv
is considered on top of the other divs.
Just happened to me, and in my case it was due to a CSS rule pointer-events: none;
which was set on a parent element and I forgot about it.
This caused any pointer events to be just ignored, which includes the cursor.
To fix this, you can just set the style to allow pointer events:
.about>span{
cursor:pointer;
pointer-events: auto;
}
Or directly in the element:
<span style="pointer-events: auto;">...</span>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With