こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

これをマウスオーバーさせたい!教えてください。

以下のcssをマウスオーバーさせたいのですが、どうすれば良いでしょうか?
ちなみに、マウスオーバー後は「☆」から「★(黄色)」に変更したいです。
教えてください。

#bookmark:before {
display: inline-block;
padding: 10px 20px;
border-radius: 50px;
border: 1.5px solid #ccc;
content: "☆";
font-size: 2em;
color: #ccc;
}

投稿日時 - 2017-07-25 13:10:33

QNo.9355695

すぐに回答ほしいです

質問者が選んだベストアンサー

《hover》をつけるとマウスオーバーになりますので、つぎのようなCSSでいかがでしょうか。


<style>
#bookmark:before {
display: inline-block;
padding: 10px 20px;
border-radius: 50px;
border: 1.5px solid #ccc;
content: "☆";
font-size: 2em;
color: #ccc;
}

#bookmark:hover:before {
border: 1.5px solid yellow;
content: "★";
color: yellow;
}
</style>

<p id="bookmark">あいうえお</p>

参考URL:http://htmq.com/selector/hover.shtml

投稿日時 - 2017-07-25 21:15:57

お礼

遅くなりました。
丁寧なご回答をありがとうございます!
before+hoverなんですね
勉強になりました!

投稿日時 - 2017-08-04 11:32:03

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

#bookmark:hover:before{
 content: "★";
 color: #ff0;
}

疑似要素は親要素の子という位置づけであるので、親要素のhoverに対してスタイルを設定すると上手くいきます。

投稿日時 - 2017-07-25 20:57:23

お礼

遅くなりました。
回答をありがとうございます!
見事成功しました!
助かりました。

投稿日時 - 2017-08-04 11:30:46

あなたにオススメの質問