Перейти к содержанию

Рекомендуемые сообщения

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

3ec8c4669f2a.jpg

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

.product-grid > div {

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

Я прописал.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

.product-list .image img {

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

сейчас так

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

}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

.product-list .image img:hover {

border: 2px solid #FF3C3F;

}

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

.product-grid > div :hover{

border: 2px solid #FF3C3F;

}

и

.product-list > div :hover{

border: 2px solid #FF3C3F;

}

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

http://ooo-arle.ru/

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Гость
Эта тема закрыта для публикации ответов.

  • Похожий контент

    • От varistello
      Добрый день. Искал модуль или коды для увеличения фото товаров при наведении, но так и не нашел. 
      Может кто подскажет как правильно и грамотно сделать? Или посоветуйте какой модуль...
      Спасибо.
    • От 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
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.