【初心者でもわかる】:hoverとcursor: pointer;でボタンのホバー時の動きをいれる方法
どうも、7noteです。一般的なボタンの動きを実装していきます。
ホームぺージ制作ではボタンを実装することが多くあります。
その時にマウスカーソルが上に乗った時の動きが実装されてないと、ボタンかどうかわかりにくいので、
カーソルを重ねた時にボタンの色を少し薄くして、マウスカーソルの形を指のマークに変更します。
完成例
書き方
index.html
<p>ボタン</p>
style.css
p {
color: #FFF; /* 文字色は白 */
font-size: 20px; /* 文字サイズは20px */
width: 200px; /* ボタンの横幅を200pxに。 */
text-align: center; /* 文字は中央揃え */
background: #66F; /* ボタンの色を青っぽく */
padding: 10px 50px; /* 余白をつける */
}
/*ここから下が、ホバーした時(マウスカーソルが要素の上に乗った時)のcss*/
p:hover {
cursor: pointer; /* マウスカーソルを手の形にする */
opacity: 0.6; /* ボタンの透明度を60%にする */
}
hover時の処理を書く時は、「:hover」と書きます。
例のように、pタグに書く場合は「p:hover」と書きますし、
何かのクラスに書く時も、「.abc:hover」と書きます。
まとめ
頻繁にhoverは使いますが、デザインデータにはhover時の処理について書かれていないこともあります。
そのときはホームページをコーディングする時に実装させなければなりません。
表面上だけみて、hover時のアクションを入れ忘れているなんてことはよくあることなので、
抜けないようにボタンには必ず今回のような動きをいれるのを忘れないようにしましょう!
おそまつ!
(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)
Author And Source
この問題について(【初心者でもわかる】:hoverとcursor: pointer;でボタンのホバー時の動きをいれる方法), 我々は、より多くの情報をここで見つけました https://qiita.com/7note/items/3d8dc9029e2e24e60744著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .