0

hoverが効きません。

デベロッパーツールで、要素の状態を強制にすると適応はされますが
実際にカーソル当てるだけでは効きません。
また、.cartの要素をクリックしてもトップページに移動しないので
.cart a:hoverやz-indexで手前にくるように指定なども試しましてみましたが、効きませんでした。

よろしくお願いいたします。

.cart {
  display: block;
  background-color: #000;
  padding: 1rem 3rem;
}

.cart a {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
}

.cart:hover {
  opacity: .5;
}
<div class=“cart”><a href=“#”>カートへ移動</a></div>

1 件の回答 1

0

hover以前にスタイルが何も適用できていないのでは?
原因はhtmlが間違っています。“”(全角)ではなく""(半角)を使う必要があります。

.cart {
  display: block;
  background-color: #000;
  padding: 1rem 3rem;
}

.cart a {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
}

.cart:hover {
  opacity: .5;
}
<div class="cart"><a href="#">カートへ移動</a></div>

2
  • ご回答ありがとうございます。失礼いたしました。質問用の文章作成時に誤って全角にしてしまったようです。実際は半角なのですが、効きません。.cart以外のhoverは効いてるのですが、共通のボタンとして作成してる.cartのみに関して効かないようです。
    – pepe
    Commented 2023年11月21日 13:51
  • @pepe 先にも答えましたが、「スニペットを実行」を押してみてください。質問文側はhoverが効いておらず、私の回答は効いています。それ以上でもそれ以下でもありません。hoverが効かないとしたら質問文に記載されていない別の原因があるのでしょうが、質問文に記載されていない以上、答えようがありません。ご自身の抱えている問題を正確に質問文に記述するのは質問者にしかできないことであり、質問者の責任であることを理解してください。
    – sayuri
    Commented 2023年11月21日 22:42

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。