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;
}
is a small part of my code. I set cursor:pointer
for .about>span
but when the mouse hover on those texts in <span>
, the cursor does not change in to pointer mode. I would like to know why it is not working. I am really new at html and css and this question may be dumb but plz help me. Thanks in advance.
I have the same issue, when I close the chrome window popup browser inspector its working fine for me.
It works if you remove position:fixed
from #firstdiv
- but @Sj is probably right as well - most likely a z-index layering issue.
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
I had this issue using Angular and SCSS. I had all my CSS nested so I decided to remove cursor: pointer;
out of it. And it worked.
Example:
.container{
.Approved{
color:green;
}
.ApprovedAndVerified{
color:black;
}
.lock_button{
font-size:35px;
display:block;
text-align:center;
}
}
.lock_button{
cursor:pointer;
}
position: relative;
z-index: 2;
cursor: pointer
worked for me.
The solution that worked for me is using forward slash instead of backslash when 'calling' out from a local directory.
instead of backslash:
cursor: url("C:\Users\Ken\projects\JavascriptGames\images\bird.png"), auto;
_x000D_
I changed it to forwardslash:
cursor: url("C:/Users/Ken/projects/JavascriptGames/images/bird.png"), auto;
_x000D_
This behavior regarding backslashes and forward slashes could probably be explained in this StackOverflow answer: Strange backslash and behavior in CSS
My problem was using cursor: 'pointer'
mistakenly instead of cursor: pointer
.
So, make sure you are not adding single or double quotes around pointer.
For the last few hours, I was scratching my head why my CSS wasn't working! I was trying to show row-resize
as cursor but it was showing the default cursor but for s-resize
browser was showing the correct cursor. I tried changing z-index
but that also didn't solve my problem.
So after trying few more solutions from the internet, I called one of my co-workers and shared my screen via Google meet and he told me that he was seeing the row-resize icon when I was seeing the default icon!!! He even sent me the screenshot of my screencast.
So after further investigation, I found out the as I was using Remote Desktop Connection to connect to my office PC, for some reason RDC doesn't show some type of cursors.
Here is the list of cursor's I couldn't see on my remote PC,
none, cell, crosshair, text, vertical-text, alias, copy, col-resize, row-resize,
Also add cursor:hand. Some browsers need that instead.
I found a solution: use :hover
with cursor: pointer
if nothing else helps.
The problem in my case was that the :after
blocked mouse events, so I had to add pointer-events: none;
to my :after
block.
Position the element as relative and then use z-index, it worked for me :)
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>
Source: Stackoverflow.com