На этом fiddle после нажатия на один из полей состояние зависания становится неактивным и не отображается снова.css hover state становится неактивным после нажатия
У меня есть три коробки с фоном, с использованием css background-image. Я использую jQuery для присоединения события click. Можете ли вы помочь мне определить, почему состояние зависания перестает работать?
Спасибо.
Поскольку встроенные стили для li перезаписывают ваши свойства css: hover. Используйте !important, чтобы заставить его работать:
li#one:hover{
background-image: url(http://i1287.photobucket.com/albums/a628/botpro7/1_hover_zps6b4b99c1.png)!important;
}
, это не сработало. состояние щелчка отображается только при выводе мыши. он должен отображаться после щелчка по изображению. Есть идеи? Благодарю. – user2432458
Потому что вы используете изображения, используете текст и изменяете свойства как цвет и маржа при наведении и активных состояниях. Так будет лучше. – Michael
Когда JQuery изменяет фоновое изображение, он делает так inline, как он изменяет фактический HTML. Это означает, что новое фоновое изображение больше specific, чем тот, что установлен в #one:hover, поэтому он не может его переопределить.
Вам необходимо добавить !important после каждого нового фонового изображения на :hover, чтобы убедиться, что у него есть специфика, чтобы его переписать.
И поэтому, как правило, разумнее не устанавливать значения CSS напрямую, а вместо этого использовать классы или аналогичные. Также помогает разделение логики и форматирования. – CBroe
@andy есть 3 условия в каждом изображении. Простаивайте, наведите указатель мыши и нажмите. Когда мы добавили! Важно для css, состояние щелчка отображается только при мыши. Я хочу, чтобы он отображался сразу после щелчка по изображению. Любая другая идея решить это? спасибо, кстати, – user2432458
@ user2432458 Тогда я бы предложил вместо этого изменить образ элемента каждый раз, просто добавить и удалить классы, такие как '.clicked', которые имеют« background-image: url() » – Andy
Проблема, что вы получали потому, что вы устанавливали фон инлайны с CSS собственностью с JQuery, я сделал демо, которое решает проблему.
Я удалил часть кода, который был одевание фона, и просто добавил .active класса в коду, так что, когда пользователь нажимает на элементе, я установил, что класс на элементе. Надеюсь, вам понравится!
@ Wallysson Нуньес. Спасибо за ответ. как я могу показать изображение с щелчком? число, которое должно быть внизу, после щелчка. – user2432458
Это не проблема, я изменил код, вот новый пример: http://jsfiddle.net/J3x7M/5/ Основная вещь, которую я сделал, - это разделить класс .active на новые классы с вашим необходимым изображением , который был с нижним номером. Надеюсь, что помогите ... :) –
@ Wallysson Nunes. Спасибо, nunes! какой большой и простой сценарий. – user2432458
'почему мое состояние зависания неактивно после того, как я щелкнул одно из изображений' >> почему у вас есть два события щелчка для одного и того же элемента. – bipen
Ничего не происходит при зависании, чтобы он был опрокинут. что вы имеете в виду? –
@bipen Я не знаю, как объединить эти события с двумя щелчками – user2432458