Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » При наведении на товар появлялась граница опр. цвета
При наведении на товар появлялась граница опр. цвета
Vitaliy_vincom
Сообщений: 34
Репутация: 0

Сообщение # 1 | 19:44:31
Как сделать чтобы при наведении на товар (фото, описание) появлялась граница вокруг этого товара определенного цвета?
killbit
Сообщений: 317
Репутация: 104

Сообщение # 2 | 20:04:44
свойство hover наверное самый простой вариант
Vitaliy_vincom
Сообщений: 34
Репутация: 0

Сообщение # 3 | 20:15:04
Цитата killbit ()
свойство hover

Куда его ставить, в коде очень много этих hoverов нашел
killbit
Сообщений: 317
Репутация: 104

Сообщение # 4 | 20:20:07
покажите куда хотите.если не военная тайна
Vitaliy_vincom
Сообщений: 34
Репутация: 0

Сообщение # 5 | 20:47:54
Цитата killbit ()
покажите куда хотите.если не военная тайна
http://sportstyle.athemes.ru/
Сообщение отредактировал Vitaliy_vincom - Пятница, 13 Фев 2015, 20:49:00
killbit
Сообщений: 317
Репутация: 104

Сообщение # 6 | 21:12:03
Z так понимаю строка 419 в my.css

a.itemPreview:hover img {
opacity: 0.8;

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

border: 1px solid #DA322A;
Vitaliy_vincom
Сообщений: 34
Репутация: 0

Сообщение # 7 | 21:27:06
Цитата 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
а чуток выше в
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
Цитата killbit ()
что бы не дергалась картинка

Да, шаблон не дергается, подскажите как границу целиком вокруг товара сделать, полностью появлялась вокруг данных товара (наименование, фото, описание, добавить в корзину, подробнее)
killbit
Сообщений: 317
Репутация: 104

Сообщение # 10 | 22:27:25
а это информеры ? на главной?
вот так можно попробовать .добавьте в ксс
.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
Цитата killbit ()
.withoutMarginBottom:hover {outline:1px solid #646464;
outline-offset: -1px;
}

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

Может куда то сюда еще надо добавить этот код?
И как сделать отступ этой появляющейся границы, получается обрамляет впритык, название сливается с этой границей.
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » При наведении на товар появлялась граница опр. цвета
Страница 1 из 11
Поиск: