Why is cursor pointer effect in CSS not working

Question

HTML         lt div id  firstdiv  gt             lt div id  intro  gt                 lt h1 id  name  gt YOU CHIA LAI lt  h1 gt                     lt ul gt                         lt li class  about  gt I am a Master of  lt span gt Architecture lt  span gt                           candidate at Rice University                           lt  li gt                         lt li class  about  gt I am also interested in  lt span gt photography lt  span gt   amp                                 lt span gt web design lt  span gt   lt  li gt                         lt li class  about  gt I wish you can know more  lt span gt about lt  span gt  me                         lt  li gt                    lt  ul gt             lt  div gt         lt  div gt    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 gt 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 gt span but when the mouse hover on those texts in  lt span gt   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

User · Answer

Position the element as relative and then use z-index  it worked for me

User · Answer

I have the same issue  when I close the chrome window popup browser inspector its working fine for me

User · Answer

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

User · Answer

Short answer is that you need to change the z-index so that  firstdiv is considered on top of the other divs

User · Answer

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

User · Answer

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

User · Answer

cursor pointer doesn t work when you re using Chrome s mobile emulator

User · Answer

Also add cursor hand  Some browsers need that instead

User · Answer

I found a solution  use  hover with cursor  pointer if nothing else helps

User · Answer

The problem in my case was that the  after blocked mouse events  so I had to add pointer-events  none  to my  after block

User · Answer

The solution that worked for me is using forward slash instead of backslash when  calling  out from a local directory   instead of backslash    x000D   x000D  cursor  url  C  Users Ken projects JavascriptGames images bird png    auto  x000D   x000D   x000D   Note  When I use backslash I am getting a net  ERR FILE NOT FOUND   I changed it to forwardslash    x000D   x000D  cursor  url  C  Users Ken projects JavascriptGames images bird png    auto  x000D   x000D   x000D   Note  When I use forward slash  the custom cursor style executes successfully    This behavior regarding backslashes and forward slashes could probably be explained in this StackOverflow answer  Strange backslash and behavior in CSS

User · Answer

It works if you remove position fixed from  firstdiv - but  Sj is probably right as well - most likely a z-index layering issue

User · Answer

My problem was using cursor   pointer  mistakenly instead of cursor  pointer  So  make sure you are not adding single or double quotes around pointer

User · Answer

position  relative  z-index  2  cursor  pointer   worked for me

User · Answer

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 gt span      cursor pointer      pointer-events  auto      Or directly in the element    lt span style  pointer-events  auto   gt     lt  span gt

[html] Why is "cursor:pointer" effect in CSS not working

Examples related to html

Examples related to css