2011-06-20 7 views
1

div要素内に画像があり、このdiv要素はCSS:hoverを使用してマウスが上を通過するとそのスタイルプロパティの一部を変更します疑似クラス。これはすべてのブラウザで正常に動作します。しかし、div要素には:activeという別のクラスもあります。これは、クリックするとその背景色を変更するはずです。div要素内の画像はCSSアクティブ擬似クラスを処理しません

ここは、物事が壊れ始めるときです。 IE9(私がインストールしたバージョン)では、画像をクリックすると、divの背景色は変わりません。 divの他の場所をクリックしたときにのみ、色が変わります。 Firefoxでは、div要素内でクリックする場所は関係ありません。背景色が変わっても、画像をクリックしても変わりません。これは私がIEも動作させたいので、usemがdivをクリックしたときに、その中のどこにでも:アクティブなエフェクトがトリガーされます。

IEで動作させるための回避策などがありますか?

+2

の下のdivにエフェクトを追加使用することができます。たぶんhttp://jsfiddle.netでデモをしましょう。 – BoltClock

+0

説明は非常に明確です...問題を再現する[jsfiddle](http://jsfiddle.net/Pcd9g/)です。問題はIE8にもあります。 – Kraz

+0

私は思った:アクティブな擬似クラスは、アンカータグでのみ使用することができます – Kasturi

答えて

1

jsFiddleのCSSの周りいじるのビットの後、私はこれを解決するために任意のCSSの方法を見つけることができませんでした:IEはちょうどのdivの一環としてIMGを検討する必要はありません。

私はこれをjavascriptで解決することをお勧めします。 onMouseDownを使用します。

擬似:

(div or img).onMouseDown(div.addClass:"active") 
(div or img).onMouseUp(div.removeClass : "active"). 

私はそれを容易にするためのJSフレームワークを使用してお勧めしたいです。 jquery mouseupおよびmousedownを参照してください。

+0

クレイズありがとう、私はそれを試してみましょう。しかし、私は先に悪いことを予期しています:)ある技術では別の技術で問題を解決するのは少し怖いようです。靴で壁に釘を掛けるように:) IE9は、すべてのスーパーハイテクで、まだ古いバージョンから運ばれたquircksがあります。しかし、とにかくおばあちゃんに感謝:) –

+1

これを見て[jsFiddle](http://jsfiddle.net/Pcd9g/3/)。イメージをクリックすると(表示されない場合は実行をクリックします)、IEではピンクになります。 FFでは、それは青白くなります。 firefoxでイメージをクリックすると、div __および__イメージがアクティブになります。 IEでは、__only__イメージがアクティブになります。 CSSで親ノードを選択することはできないため、JavaScriptを使用する(またはデザインを変更する、またはIEのサポートを断念する)必要があります。 – Kraz

0

この問題は、やや難解です。

あなたは、オーバーレイとして、画像の上に別のdivを設置し、そのdiv要素は、クリックやマウス操作に対応するために作成し、jQueryの実際のコードを参照してくださいする必要があり、画像

関連する問題