Почему эффект "курсор: указатель" в CSS не работает

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;
}

- небольшая часть моего кода. Я установил cursor:pointer для .about>span, но когда мышь наводится на те тексты в <span>, курсор не переходит в режим указателя. Я хотел бы знать, почему он не работает. Я действительно новичок в html и css, и этот вопрос может быть немым, но plz мне помогает. Спасибо заранее.

Ответы

Ответ 1

Короткий ответ заключается в том, что вам нужно изменить z-index так, чтобы #firstdiv рассматривался поверх других div.

Ответ 2

Я долгое время работал с моим css, изменяя позиционирование и z-индекс примерно каждого элемента на странице. Я удалил каждый другой элемент из DOM, кроме одного с курсором: указатель на зависание, и он STILL не работал.

Для меня, на Mac OSX El Captain V 10.11, проблема была связана с каким-то вмешательством в Photoshop CC. Как только я закрыл фотошоп, курсор снова начал работать.

Решение для меня: Закрыть и снова открыть фотошоп

Ответ 3

cursor:pointer не работает, когда вы используете мобильный эмулятор Chrome.

enter image description here

Ответ 4

Просто со мной произошло, и в моем случае это было из-за правила CSS pointer-events: none;, которое было установлено на родительский элемент, и я забыл об этом.

Это привело к тому, что любые события указателя были просто проигнорированы, включая курсор.

Чтобы исправить это, вы можете просто установить стиль для разрешения событий указателя:

.about>span{
    cursor:pointer;
    pointer-events: auto;
}

Или непосредственно в элементе:

<span style="pointer-events: auto;">...</span>

Ответ 5

Также добавьте курсор: рука. Некоторые браузеры нуждаются в этом.

Ответ 6

Он работает, если вы удаляете position:fixed из #firstdiv, но @Sj, вероятно, тоже прав, скорее всего, проблема с z-индексом.

Ответ 7

У меня была эта проблема с использованием Angular и SCSS. У меня были все мои CSS вложенные, поэтому я решил удалить cursor: pointer; из этого. И это сработало.

Пример:

.container{
  .Approved{
    color:green;
  }

  .ApprovedAndVerified{
    color:black;
  }

  .lock_button{
    font-size:35px;
    display:block;
    text-align:center;
  }
}

.lock_button{
  cursor:pointer;
}

Ответ 8

Проблема в моем случае заключалась в том, что :after блокировал события мыши, поэтому мне пришлось добавить pointer-events: none; в мой блок :after.

Ответ 9

У меня та же проблема, когда я закрываю инспектор браузера, он работает нормально для меня.

Ответ 10

Позиционируйте элемент как относительный, а затем используйте z-index, у меня это сработало :)