Как сделать эффект при наведении на div?

Question

[squirtazzer]

Здравствуйте, сайт element-store.ru
Блоки в ряд(баннер,пленка и тд)под слайдером. Как сделать какой нибудь эффект при наведении на div?Если я вношу стили hover в div то ВСЕ div блоки на сайте получают такой эффект. Как сделать чтобы ТОЛЬКО ЭТИ блоки имели такое эффект?

Comments

[spike__x]

так вы какому классу делаете ховер?

[squirtazzer]

spike__x, Div блокам...всем получается.не могу понять какому именно классу сделать чтобы были только эти блоки.

[spike__x]

squirtazzer, если хотите блокам под слайдером которые то класс column one-fourth

[squirtazzer]

spike__x, спасибо попробую

[squirtazzer]

spike__x,
.column one-fourth
hover{ border-bottom: 5px solid blue; }

вот такое внес в ксс и ничего

[spike__x]

squirtazzer, нужно так

.column .one-fourth:hover {
 border-bottom: 5px solid blue;
}

[squirtazzer]

spike__x, спасибо большое)

[spike__x]

squirtazzer, Пожалуйста)

[squirtazzer]

spike__x, внес,сохранил ксс,обновил страницу ктрл+ф5,не получается

[spike__x]

squirtazzer, вы точки перед названиями классов поставили
.column .one-fourth:hover

[squirtazzer]

squirtazzer, https://hkar.ru/Rl7r

так точно.

[squirtazzer]

spike__x, https://hkar.ru/Rl7r так точно

[spike__x]

squirtazzer, Нужно у каждого класса точку

.column .one-fourth:hover {
 border-bottom: 5px solid blue;
}

2 точки тут потому что два класса
у one-fourth тоже точку перед ним

[squirtazzer]

spike__x, element-store.ru сделал как вы сказали https://hkar.ru/Rl7u не работает.

Answer 1

[spike__x]

Вот так например

.column .one-fourth:hover {
    transform: scale(1.1,1.1);
}

У вас тут два класса column и one-fourth и у обоих надо точку ставить

Comments

[squirtazzer]

внес.не хочет(

[spike__x]

squirtazzer, странно, я у вас на сайте не вижу его

[spike__x]

squirtazzer, попробуйте так
.one-fourth:hover {
transform: scale(1.1,1.1);
}

[squirtazzer]

spike__x,

https://hkar.ru/Rl7C

[squirtazzer]

spike__x, все,заработало)спасибо вам огромное)

[spike__x]

squirtazzer, )))

[squirtazzer]

spike__x, а какие еще крутые анимации можно применить?не просто увеличение,а еще что нибудь?а то при увеличении шрифт немного расплывается)))

[spike__x]

squirtazzer, тут гляньте animate

[squirtazzer]

spike__x, спасибо,ух подберу точно что нибудь)

[spike__x]

squirtazzer, ага))

Answer 2

[Дмитрий]

Вы лучше не ищите готовый код, а почитайте про наследование и каскадирование в CSS.

ссылка