- PR -

IE7におけるCSSのhover機能の制御について

1
投稿者投稿内容
あたろう
会議室デビュー日: 2007/05/29
投稿数: 12
投稿日時: 2007-11-16 11:18
お世話になります。

ボタンにマウスが重なったときに画像を変化させる処理を行いたいのですが
HTML上に
<input type="button" id="btn" class="btnClass" />
とボタンを配置しておきCSSで
input.btnClass {background:url(画像１へのパス) 0px 0px no-repeat;}
input.btnClass:hover {background:url(画像２へのパス) 0px 0px no-repeat;}
と記述しています。
やりたいことは通常時はボタンを画像１、
マウスが重なったときに画像２が表示されるようにする制御です。

現状の問題点は
ボタン上でマウスを押し、押したままの状態でマウスをボタン外に移動し、
マウスを離すと画像２になったままとなってしまうことです

画像の切り替えをmouseover、mouseoutで制御すれば可能そうなのですが
ボタンの量が多く、処理が重くなるためmouseoverのイベントは使いたくないです。
なので、ボタンのmousedownの時にEvent.observe($("btn"),'mouseout',処理)とし、
その処理内でボタンの画像を戻す処理ができないか？と考えております。
仮にその処理内で
$("btn").className="";
$("btn").className="btnClass";
のように一度classを削除した後にclassをもどしてもhoverの画像２のままでした。

また、CSSのexpressionも処理速度の理由より使えません。

CSSのhoverを根本的に勘違いしてるのでしょうか？原因と解決方法がわかりません。
ご存知の方、ご教授お願いします。
らざるす
会議室デビュー日: 2002/11/15
投稿数: 11
投稿日時: 2007-11-16 14:27
IEのhover疑似クラスは、Aタグにしか使えないんじゃない。
あたろう
会議室デビュー日: 2007/05/29
投稿数: 12
投稿日時: 2007-11-16 15:09
http://journal.mycom.co.jp/special/2006/ie7beta2/004.html
などのページに記載されていますが
IE7よりhoverが<a>のhref以外でも使用可能になりました
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2007-11-16 15:32
質問者さんは別に hover 擬似クラスで画像が変化しないと言っているわけではないですよね。

引用:

あたろうさんの書き込み (2007-11-16 11:18) より:

現状の問題点は
ボタン上でマウスを押し、押したままの状態でマウスをボタン外に移動し、
マウスを離すと画像２になったままとなってしまうことです

"画像 2 になったまま" なのが問題だと書いています。

さて、<input type="button"...> 上でマウス ボタンを押すということは、Focus, Active が変化しますよね。 このあたりのことは考慮されていますでしょうか。 それと CSS の擬似クラスは継承の概念がありますから、記述順序に気をつけなければなりません。

このあたりの情報がありませんでしたので、とりあえずここまで。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
1

スキルアップ／キャリアアップ（JOB@IT）