演習課題「マウスカーソルの形状を指定しよう」
現在、ブラウザでは、ボックス1, 2, 3が表示されています。
ここで、ボックス1ではマウスカーソルを表示させず、ボックス2では細長いアルファベットの「I」のようなマウスカーソルが、ボックス3では指を差す手のマウスカーソルが表示されるようにしてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃04:マウスカーソルを変更する(cursor)
このチャプターでは、マウスカーソルの変更方法を学習します。
cursorプロパティを使うことで、ボックスにマウスカーソルを重ねたときの形状を指定することができます。cursorプロパティの初期値はautoになっています。cursorプロパティで指定できる主な値は、
・ ボックスが持つ情報に応じて表示するマウスカーソルを自動的に決定するauto
・ プラットフォームに依存する既存のマウスカーソルを表示するdefault
・ マウスカーソルを表示しないnone
・ リンクを示すポインタで、よく指を差す手のマウスカーソルが表示されるpointer
・ 待機中や処理中であり操作が不可能である状態を示すマウスカーソルで、よく砂時計や腕時計のマウスカーソルが表示されるwait
・ テキストが選択可能であることを示すマウスカーソルで、よく細長いアルファベットの「I」のようなマウスカーソルが表示されるtext
・ 要求された操作が受け付けられないことを示すために表示されるnot-allowed
があります。
@charset "UTF-8";
.contents {display: flex;}
.contents div {
width: 100px;
height: 100px;
}
.box_1 {
background-color: aqua;
cursor: text;
}
.box_2 {
background-color: yellow;
cursor: pointer;
}
.box_3 {
background-color: silver;
cursor: none;
}