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

質問

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

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

回答No.2

Katsu_Kaiz · ベストアンサー

《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

お礼

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

回答No.1

Proof4

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

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

お礼

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