product_hover [Решено]

[dvi3001]

Как сделать чтобы фото товара выделялось при наведении курсора?

Как сделать чтобы при наведении курсора этот блок выделялся по контуру при наведении курсора или лучше конечно чтобы выделялся и увеличивался на пару пикселей.

Подскажите кто знает!

[aridius]

В \catalog\view\theme\default\stylesheet\stylesheet.css добавте

найдите и скопируйте блок

.box-product > div {

......

.....

.....

}

допишите :hover

и

border: 1px solid #FF3C3F;

.box-product > div:hover {

border: 1px solid #FF3C3F;

}

border: 1px solid #FF3C3F; -и отвечает за рамку

[dvi3001]

В \catalog\view\theme\default\stylesheet\stylesheet.css добавте

найдите и скопируйте блок

.box-product > div {

......

.....

.....

}

допишите :hover

и

border: 1px solid #FF3C3F;

.box-product > div:hover {

border: 1px solid #FF3C3F;

}

border: 1px solid #FF3C3F; -и отвечает за рамку

Я так уже экспереминтировал.

.box-product > div {

width: 170px;

display: inline-block;

vertical-align: top;

margin-right: 20px;

margin-bottom: 10px;

border:1px solid #D7D5D6;

padding:10px;

-webkit-border-radius: 5px 5px 5px 5px;

-moz-border-radius: 5px 5px 5px 5px;

-khtml-border-radius: 5px 5px 5px 5px;

border-radius: 5px 5px 5px 5px;

-webkit-box-shadow: 0 5px 10px #777777;

-moz-box-shadow: 0 5px 10px #777777;

box-shadow: 0 5px 10px #777777;

}

.box-product > div:hover {

border: 1px solid #FF3C3F;

}

Выделяется сама фотка,цена,название,кнопка купить.Сам блок нет.

А нужно чтобы сам блок реагировал на курсор а не фотка,цена,название,кнопка купить.

Может что в коде не так?

[dvi3001]

На главной получилось.

.box-product > div {

width: 170px;

display: inline-block;

vertical-align: top;

margin-right: 20px;

margin-bottom: 10px;

border:2px solid #D7D5D6;

padding:10px;

background:#F4F2F3;

-webkit-border-radius: 5px 5px 5px 5px;

-moz-border-radius: 5px 5px 5px 5px;

-khtml-border-radius: 5px 5px 5px 5px;

border-radius: 5px 5px 5px 5px;

-webkit-box-shadow: 0 5px 10px #777777;

-moz-box-shadow: 0 5px 10px #777777;

box-shadow: 0 5px 10px #777777;

}

.box-product > div:hover {

border: 2px solid #FF3C3F;

}

А в котегориях

Вид: Список / Сетка

.product-grid > div {

.product-list > div {

Почемуто нет.хотя прописано также.А получучается как на фото выше.

[aridius]

сделал как вам написал! Дайте ссылку на сайт!

[dvi3001]

На главной я сделал в котегориях не получается.Пропишу сейчас Вид: / Сетка

.product-grid > div {

вот ссылка: http://ooo-arle.ru/

Я прописал.

[aridius]

Попробуйте с этим блоком проделать!

.product-list .image img {

[dvi3001]

сейчас так

.product-list .image img {

padding: 3px;

border: 1px solid #993333;

-webkit-border-radius: 7px 7px 0px 7px;

-moz-border-radius: 7px 7px 0px 7px;

-khtml-border-radius: 7px 7px 0px 7px;

border-radius: 7px 7px 0px 7px;

}

[aridius]

сделайте как вы делали на главной, должно получиться все

[dvi3001]

кусок кода с главной:

.box-product {

width: 100%;

overflow: auto;

text-align: center;

}

.box-product > div {

width: 170px;

display: inline-block;

vertical-align: top;

margin-right: 20px;

margin-bottom: 10px;

border:2px solid #D7D5D6;

padding:10px;

background:#F4F2F3;

-webkit-border-radius: 5px 5px 5px 5px;

-moz-border-radius: 5px 5px 5px 5px;

-khtml-border-radius: 5px 5px 5px 5px;

border-radius: 5px 5px 5px 5px;

-webkit-box-shadow: 0 5px 10px #777777;

-moz-box-shadow: 0 5px 10px #777777;

box-shadow: 0 5px 10px #777777;

}

.box-product > div:hover {

border: 2px solid #FF3C3F;

}

#column-left + #column-right + #content .box-product > div {

width: 119px;

}

.box-product .image {

display: block;

margin-bottom: 0px;

text-align: center;

}

.box-product .image img {

padding: 3px;

border: 1px solid #993333;

-webkit-border-radius: 7px 7px 0px 7px;

-moz-border-radius: 7px 7px 0px 7px;

-khtml-border-radius: 7px 7px 0px 7px;

border-radius: 7px 7px 0px 7px;

}

Вроди и в .product-grid > div {

всё такде прписано.Сам что-то не въеду.

[aridius]

Вставте такой кусок и должно работать!

.product-list .image img:hover {

border: 2px solid #FF3C3F;

}

[dvi3001]

Всё вроди заработало.Хотя ни чего не далал.Прописал ещё раз:

.product-grid > div :hover{

border: 2px solid #FF3C3F;

}

и

.product-list > div :hover{

border: 2px solid #FF3C3F;

}

И всё работает.

[Garri]

И всё работает.

И я даже знаю почему)нужно кэш почаще чистить)

[dvi3001]

Это точно!!!!!!!!

[AlexFisher]

решено, вобщем.

[dvi3001]

Помогите решить ещё одну задачку.

Если посмотреть на главной странице то видно что блоки в котором фото модели,название и кнопка купить все они одинакового размера.Как прописать так чтобы Лидеры продаж,блок в котором фото модели,название и кнопка купить,которые по левой стороне.Размеры его регулировался отдельно а не со всеми вместе?

http://ooo-arle.ru/