SELECT上でのマウスカーソルについて

[新着] Webテンプレートを仮オープンしました



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>


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

BJavaScript
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属性が指定されていない。
については、こちらのコードの記載漏れでした。
実際の実験したコードをそのまま具体的に記述させていただきますと、
ACSSの場合
呼び出している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>

BJavaScriptの場合
呼び出している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

一覧へ戻る