どうも！LSSです！！
今回は「マウスカーソルが乗った時に、マウスカーソルの形状を変更する」CSSを試してみます。
カーソルの形状サンプル一覧
コード
<div style="cursor:カーソルの形状;">適当な文章</div>
例えば
<div>タグに限らず、どんなタグでもいいんですが、例えば
コード
<span style="cursor:help;">本当だろうか？</span>
のようなコードを書くと、
本当だろうか？
のように、マウスカーソルが乗った時のカーソルの形状が変わるようにできます。
あとがき
あまりマトモな使い途を思いつかないネタでしたｗ
マトモじゃない例としては、Web上のお遊びとして cursor:pointer; を使って「クリックできないリンク」のふりをするとか？ｗ
…実は、マウスカーソル変更を試したい、というより、こういう「選択肢がたくさんあるコード」をJavaScriptで書き出す、のを試して見たかっただけだったりしますｗ
ちなみにこんな感じ。
コード
<style><!--
.cbox{
border:1px solid black;
width:100px;
height:100px;
padding:5px;
display:inline-block;
margin:5px;
vertical-align:top;
}
--></style>
<div id="gamen"> </div>
<script>// <![CDATA[
ctxt=['auto','crosshair','default','pointer','move','text','wait','progress','help','context-menu','vertical-text','alias','copy','no-drop','not-allowed','col-resize','row-resize','all-scroll','e-resize','ne-resize','n-resize','nw-resize','w-resize','sw-resize','s-resize','ew-resize','ns-resize'];
txt='';
for(i=0;i<ctxt.length;i++){
txt+='<div class="cbox" style="cursor:'+ctxt[i]+';">'+ctxt[i]+'</div>';
}
gamen.innerHTML=txt;
// ]]></script>
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
