Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8674

疑似クラスについて

$
0
0

疑似クラスとはなんなんだ???????????

cssには、疑似クラスというのがあります。
普通のクラス名にコロン(:)をつけるだけで、難しそうなことが簡単にできます。

今回はその中でも一番簡単だと思った、[hover]という疑似クラスを紹介します。

コード

main.css
.test{color:black;/* ボタンの文字をblackにする。*/}.test:hover{background-color:blue;/* ボタンにマウスが触れたら、後ろの色を青に変える。*/}
index.html
<inputtype="button"class="test"value="ボタンだよー"><!--ボタンを作る。-->

これでできました。:blush:

確認

マウスが触っていないとき。
image.png
マウスが触っているとき。(マウスが見えないけど、ちゃんと当たっています。)
image.png

できたでしょうか?
他にもいろんなことができるので、ぜひ調べて使ってみてはどうでしょうか?_

参考

MDN


Viewing all articles
Browse latest Browse all 8674

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>