ボタン外でもホバーアクションが発生する

Question

前提・実現したいこと

ページネション用リンクを角丸にしたら角丸にした部分にホバーしたらリンクにホバーできてしまう

発生している問題・エラーメッセージ

ページネション用リンクを角丸にしたら角丸にした部分にホバーしたらリンクにホバーできてしまう
その証拠にカーソルマークが変わる

試したこと

調べる(Quutaなど)

<ul>
  <li><a><span>1</span></a></li>
</ul>

li {
    border: 1px solid #e8e;

  width: 40px;
  height: 40px;
 border-radius: 50%;
  cursor: pointer;
}ul {
  list-style: none;
}
li a {
  display: flex;  align-items: center;   justify-content: center;
  width: 100%;

  color: #333;

  height: 100%;
}

Answer 1

a要素に背景色を付与するとわかりますが、cursorプロパティは継承され、border-radiusプロパティは継承されないことが原因です。
今回の場合、以下のようにa要素に対してborder-radiusプロパティの値を継承することで、質問者さんの実現したいことが行えると思います(動作確認用リンク)。

ul {
  list-style: none;
}

li {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: 1px solid #e8e;
  border-radius: 50%;
}

li a {
  display: flex;
  width: 100%;
  height: 100%;
  color: #333;
  align-items: center;
  justify-content: center;
  border-radius: inherit; /* 追記 */
}

Comments

[退会済みユーザー]

なるほど！課題で困ってたので役立ちまちた！