87

に設定cursor: pointerしまし.about > spanたが、 のテキスト上にマウスを置いたときに<span>、カーソルがポインター モードに変わりません。なぜ機能しないのか知りたいです。

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

17 に答える 17

397

CSS を何時間もいじり、ページ上のほぼすべての要素の配置と z-index を変更しました。カーソルのあるものを除いて、DOMから他のすべての要素を削除しました：ホバー上のポインターですが、それでも機能しませんでした。

私の場合、Mac OSX El Captain V 10.11 では、この問題は Photoshop CC との何らかの干渉に関係していました。Photoshop を閉じると、カーソルが再び機能し始めました。

私にとっての解決策： Photoshopを閉じて再度開く

どうやらこれは、Photoshop、Sketch、DataGrip、Acrobat、Sublime Text など、さまざまなプログラムが原因で発生する可能性があります。

于 2016-02-04T21:52:52.143 に答える
35

cursor:pointerChrome のモバイル エミュレータを使用している場合は機能しません。

ここに画像の説明を入力

于 2017-06-13T00:00:17.300 に答える
1

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;
}
于 2019-03-19T16:21:42.747 に答える
0

私の場合の問題は、:afterマウスイベントがブロックされたpointer-events: none;ため、:afterブロックに追加する必要があったことです。

于 2019-08-16T10:11:37.443 に答える
-1

ユーザーがテキストを選択できないようにしてから、curser:pointerプロパティを使用します -

.targeted-span{
user-select: none;
curser : pointer;}
于 2021-03-17T18:51:50.427 に答える
-1

私は解決策を見つけました：他に何も役に立たない場合は:hoverwith を使用してください。cursor: pointer

于 2020-10-30T21:37:59.557 に答える
-2

要素を相対的に配置してから使用しますz-index

.menu-toggle{ 
    display: block; 
    width: 40px; 
    height: 40px; 
    border:2px solid white; 
    border-radius: 5px; 
    margin: 15px; 
    float: right; 
    cursor: pointer; 
    text-align: center; 
    font-size: 30px; 
    color: var(--light-bg-color); 
    z-index: 10; 
}
于 2019-06-26T05:33:09.360 に答える