Изображение в элементе div не обрабатывает активный псевдокласс CSS

Question

У меня есть изображение, расположенное внутри элемента div, и этот элемент div изменяет некоторые из своих свойств стиля, когда мышь проходит над ним, используя псевдокласс CSS: hover.Это прекрасно работает во всех браузерах.Но у элемента div также есть другой класс: active, который должен менять цвет фона при нажатии.

Вот когда все начинает ломаться.В IE9 (версия, которую я установил), когда я нажимаю на изображение, цвет фона div не меняется.Только когда я нажимаю в другом месте на div, он работает, цвет меняется.В Firefox не имеет значения, где я щелкаю внутри элемента div, цвет фона меняется, даже если я нажимаю на изображение.Вот как я хочу, чтобы IE тоже себя вел, поэтому, когда пользователь нажимает на div, независимо от того, где он находится, запускается эффект: active.

Есть ли обходной путь или что-то, что я могу использовать, чтобы заставить его работать в IE?

Answer 1

После небольшой игры с CSS на jsFiddle я не нашел никакого CSS-решения для решения этой проблемы: IE просто не хочет рассматривать img как часть div .

Я бы предложил вам решить эту проблему в javascript.Использование onMouseDown.

псевдо:

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

Я бы предложил использовать инфраструктуру js, чтобы упростить ее.См. jquery mouseup и mousedown .

Answer 2

Существует более сложный способ обойти эту проблему.

Вы можете поместить еще один div поверх изображения в качестве наложения и сделать этот div для реагирования на щелчки и действия мыши, а с помощью jQuery добавить эффекты в div под изображением