掲示板/総合質問板/過去ログ/一覧/ SELECT上でのマウスカーソルについて

0 名前：コロ： 2007/05/10（木） 21:13 ID:iG8vaPVg sub-Q5

15行のサイズ指定がしてあるSELECTメニューの中の文字列にカーソルが当たった際に、カーソルの形を変更する、という処理を作成しています。スタイルシートやJavaScriptで試してみましたが、どちらもSELECTの中に入ると利かなくなってしまうようです。何かいい方法がありましたら教えてください。よろしくお願いします。

以下のソースで試してみましたが上手く行きませんでした。

①HTML
<form name="form1">
<select size="15" name="select_menu">
<div style="cursor:hand;"><option>XXXX</option>...</div>
</select>
</form>


②CSSファイル
.select option:hover{
	background-color: #FF3333;
	color: #FFFFFF;
	cursor: pointer;
}

③JavaScript
function cursor_change(){

document.Form1.select_menu.style.cursor = "hand";

}

1 名前：元帥： 2007/05/10（木） 21:13 ［URL］ ID:fRYBo5Oz sub-bK: 移動元くらいは書きましょう。
http://www.tagindex.com/cgi-lib/q2bbs/patio.cgi?mode=view&no=1317

やりたい事の実現は可能ですが、>>0のコードでは無理です。
先ずは文法を見直しましょう。
・select要素の子要素としてdiv要素は置けない。
・div要素の子要素にoption要素は置けない。
・JavaScriptの関数を実行する文がない。
・class属性にselectが指定されている要素の子要素であるoptionに疑似クラスを設定しているが、どこにもclass属性が指定されていない。

2 名前：コロ： 2007/05/10（木） 21:13 ID:iG8vaPVg sub-Q5

ご返答ありがとうございます。
>・select要素の子要素としてdiv要素は置けない。
>・div要素の子要素にoption要素は置けない。
に関しては勉強不足でした。

>・JavaScriptの関数を実行する文がない。
>・class属性にselectが指定されている要素の子要素であるoptionに疑似クラスを設定しているが、どこにもclass属性が指定されていない。
については、こちらのコードの記載漏れでした。
実際の実験したコードをそのまま具体的に記述させていただきますと、

②CSSの場合
呼び出しているCSSファイル
.c_select　{
	text-align: left;
	font-size: 13px;
}

.c_select option:hover{
	background-color: #FF3333;
	color: #FFFFFF;
	cursor: pointer;
}

HTML
<form name="form1">
<select size="15" name="select_menu"　class="c_select">
<option>XXXX</option>...
</select>
</form>

③JavaScriptの場合
呼び出しているJavaScriptファイル
function cursor_change(){

document.form1.select_menu.style.cursor = "hand";

}

HTML
<form name="form1">
<select size="15" name="select_menu" onmouseover="cursor_change()">
<option>XXXX</option>...
</select>
</form>

のような感じです。JavaScriptの方はoptionタグを指定したりも
してみたのですが、どちらも駄目でした。スタイルシートの方は
cursor以外の要素は効いているのでクラスは呼び出せている
ようです。
以上、説明不足で申し訳ありませんでした。

3 名前： key-child ： 2007/05/10（木） 21:13 ID:yOFgYhCD sub-bK: 同様の質問
http://q.hatena.ne.jp/1157681104