При наведении на товар появлялась граница опр. цвета

Vitaliy_vincom

Сообщений: 34

Репутация: 0

Сообщение # 1 | 19:44:31 13 Фев 2015

Как сделать чтобы при наведении на товар (фото, описание) появлялась граница вокруг этого товара определенного цвета?

killbit

Сообщений: 317

Репутация: 104

Сообщение # 2 | 20:04:44 13 Фев 2015

свойство hover наверное самый простой вариант

Vitaliy_vincom

Сообщений: 34

Репутация: 0

Сообщение # 3 | 20:15:04 13 Фев 2015

Цитата killbit (

)

свойство hover

Куда его ставить, в коде очень много этих hoverов нашел

killbit

Сообщений: 317

Репутация: 104

Сообщение # 4 | 20:20:07 13 Фев 2015

покажите куда хотите.если не военная тайна

Vitaliy_vincom

Сообщений: 34

Репутация: 0

Сообщение # 5 | 20:47:54 13 Фев 2015

Цитата killbit (

)

покажите куда хотите.если не военная тайна

http://sportstyle.athemes.ru/

Сообщение отредактировал Vitaliy_vincom - Пятница, 13 Фев 2015, 20:49:00

killbit

Сообщений: 317

Репутация: 104

Сообщение # 6 | 21:12:03 13 Фев 2015

Z так понимаю строка 419 в my.css

a.itemPreview:hover img {
opacity: 0.8;

}
Добавьте бордюр

border: 1px solid #DA322A;

Vitaliy_vincom

Сообщений: 34

Репутация: 0

Сообщение # 7 | 21:27:06 13 Фев 2015

Цитата killbit (

)

Z так понимаю строка 419 в my.cssa.itemPreview:hover img {
opacity: 0.8;

}
Добавьте бордюр

border: 1px solid #DA322A;

}
a.itemPreview:hover img {
opacity: 0.8;
}

добавил, получается выделяет только фотку и при наведении шаблон пляшет, скорее всего изза 2 px (сверху и снизу по 1), в идеале было бы здорово если бы граница полностью появлялась вокруг данных товара (наименование, фото, описание, добавить в корзину, подробнее)

$IMAGE1$

killbit

Сообщений: 317

Репутация: 104

Сообщение # 8 | 21:27:39 13 Фев 2015

а чуток выше в
a.itemPreview img {
width: 255px;
height: 255px;
transition: opacity .3s ease;
}
можно добавить
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

что бы не дергалась картинка

Vitaliy_vincom

Сообщений: 34

Репутация: 0

Сообщение # 9 | 21:37:00 13 Фев 2015

Цитата killbit (

)

что бы не дергалась картинка

Да, шаблон не дергается, подскажите как границу целиком вокруг товара сделать, полностью появлялась вокруг данных товара (наименование, фото, описание, добавить в корзину, подробнее)

killbit

Сообщений: 317

Репутация: 104

Сообщение # 10 | 22:27:25 13 Фев 2015

а это информеры ? на главной?
вот так можно попробовать .добавьте в ксс
.withoutMarginBottom:hover {
outline:1px solid #646464;
outline-offset: -1px;
}

Добавлено (13 Фев 2015, 22:27:25)
---------------------------------------------
Тут тогда прозрачность нужно убрать иначе замыливает

a.itemPreview:hover img {
opacity: 0.8;
}

Vitaliy_vincom

Сообщений: 34

Репутация: 0

Сообщение # 11 | 08:19:10 14 Фев 2015

Цитата killbit (

)

.withoutMarginBottom:hover {outline:1px solid #646464;
outline-offset: -1px;
}

Да да, то что нужно... но она только на главной странице работает, там еще есть ЦСС помимо общего
ЦСС Интернет-магазин
Главная страница магазина
Каталог товаров
Вид товара в каталоге
Таблица стилей (CSS)

Может куда то сюда еще надо добавить этот код?
И как сделать отступ этой появляющейся границы, получается обрамляет впритык, название сливается с этой границей.

Страница 1 из 1 1
Модератор форума: Yuri_G