Jump to content

Recommended Posts

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

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

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

post-22510-0-52619900-1358540895_thumb.png

Share this post


Link to post
Share on other sites

В \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; -и отвечает за рамку

Share this post


Link to post
Share on other sites

В \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;

}

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

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

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

post-22510-0-37114300-1358578270_thumb.png

post-22510-0-68213000-1358578292_thumb.png

post-22510-0-32101700-1358578297_thumb.png

Share this post


Link to post
Share on other sites

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

.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 {

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

Share this post


Link to post
Share on other sites

3ec8c4669f2a.jpg

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

Share this post


Link to post
Share on other sites

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

.product-grid > div {

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

Я прописал.

Share this post


Link to post
Share on other sites

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

.product-list .image img {

Share this post


Link to post
Share on other sites

сейчас так

.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;

}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

.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 {

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

Share this post


Link to post
Share on other sites

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

.product-list .image img:hover {

border: 2px solid #FF3C3F;

}

  • +1 1

Share this post


Link to post
Share on other sites

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

.product-grid > div :hover{

border: 2px solid #FF3C3F;

}

и

.product-list > div :hover{

border: 2px solid #FF3C3F;

}

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

http://ooo-arle.ru/

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Similar Content

    • By varistello
      Добрый день. Искал модуль или коды для увеличения фото товаров при наведении, но так и не нашел. 
      Может кто подскажет как правильно и грамотно сделать? Или посоветуйте какой модуль...
      Спасибо.
    • By rostikvorobev
      Есть сайт, snazzy-store.com на OpenCart v.1.5.5.1.2 необходимо сделать увеличение области изображения при наведении мышкой, пересмотрел весь форум, все способы уже устаревшие, модули уже не работают на этой версии. Кто делал это, напишите что вы использовали, может быть ссылки дадите, модуль какой... Смотрел в эту сторону, хотел вручную прикрутить http://www.mind-projects.it/projects/jqzoom/demos.php делал по инструкции http://www.mind-projects.it/projects/jqzoom/index.php#download_section ничего не вышло.... Выглядить должно примерно вот как тут: http://store.pe-art.ru/shipping/shipedit
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.