Наведите указатель мыши на один элемент, анимируйте еще один

Я узнал здесь о переполнении стека, который я могу навести на первый элемент и оживить второй, пока второй сидит сзади внутри первого в HTML5.Наведите указатель мыши на один элемент, анимируйте еще один

Так у меня есть пример этого:

div.oblacek-hold:hover img.oblacek { 
    -webkit-filter: blur(0px) opacity(100%); 
    -o-filter: blur(0px) opacity(100%); 
    -ms-filter: blur(0px) opacity(100%); 
    filter: blur(0px) opacity(100%); 
}

Здесь img.oblacek сидит внутри div.oblacek-hold элемента и при наведении указателя мыши на div.oblacek-hold, img.oblacek оживляется. Это отлично работает! но img.oblacek также анимируется, если я нахожу img.oblacek, и это то, чего я не хочу.

Есть ли способ решить это с помощью CSS?

источник

2016-01-25 71GA

Пожалуйста, дайте скрипку Demo – Krish

Пожалуйста, дайте значение по умолчанию с !important в img.oblacek.

Что-то вроде этого

.oblacek:hover { 
    -webkit-filter: blur(0px) opacity(100%) !important; 
    -o-filter: blur(0px) opacity(100%) !important; 
    -ms-filter: blur(0px) opacity(100%) !important; 
    filter: blur(0px) opacity(100%) !important; 
}

Проверка образца скрипку здесь https://jsfiddle.net/nikhilvkd/h9vjezvp/1/

источник

2016-01-25 07:51:24 Krish

Это работает для меня. Спасибо. Не могли бы вы объяснить, почему здесь важно? – 71GA

приветствуется, когда ключевое слово! Important используется в определенной паре свойств/значений, это приведет к тому, что конкретное значение выйдет из каскада и станет, как следует из названия, самым важным значением для этого свойства, переопределяя любые другие. статью здесь https://css-tricks.com/when-using-important-is-the-right-choice/ – Krish

Просто добавьте еще один :hover в img.oblacek и переопределить нежелательные свойства с !important как

img.oblacek:hover { 
    filter: blur(0px) opacity(100%) !important; 
}

jsfiddle example

источник

2016-01-25 06:43:20

Я добавил свой кусок кода в CSS и он не работает. Не могли бы вы объяснить немного больше ... – 71GA

Используйте правильное наследование !! https://jsfiddle.net/4hh3c0jo/1/ НИКОГДА НЕ используйте '! important', если вы не разрабатываете HTML-письма – Christophe

@ Кристоферская ярмарка, мой плохой –

Наведите указатель мыши на один элемент, анимируйте еще один

ответ

Смежные вопросы