Показ описания при наведении на картинку
Руслан066
Новичок
- #1
Друзья, перерыл весь интернет на 2 языках.
Простейшая задача.
При наведении на картинку(hover еффект) в выводе продуктов в основном разделе, и категории конкретные — показ короткого описания товара.
Буду очень признателен за помощь.
rikitiki
Специалист
- #2
Руслан066 написал(а):
При наведении на картинку(hover еффект) в выводе продуктов в основном разделе, и категории конкретные — показ короткого описания товара.
Нажмите для раскрытия…
Как-то замысловато написано. Фиг поймёшь.
Если вам попросту всплывающий текст в витрины вставить то:
http://innka.info/vsplyvayushhie-opisaniya-v-vitrinax-woocommerce/
На мой взгляд лучше обычного hover, так как в этом варианте div c текстом за курсором бегает.
Последнее редактирование:
Руслан066
Новичок
- #3
rikitiki написал(а):
Как-то замысловато написано.
Фиг поймёшь.
Если вам попросту всплывающий текст в витрины вставить то:
http://innka.info/vsplyvayushhie-opisaniya-v-vitrinax-woocommerce/
На мой взгляд лучше обычного hover, так как в этом варианте div c текстом за курсором бегает.Нажмите для раскрытия…
Фиг поймёшь.http://pomodoro.od.ua/category/1 вот пример, так можно сделать?
rikitiki
Специалист
- #4
Руслан066 написал(а):
http://pomodoro.od.ua/category/1 вот пример, так можно сделать?
Нажмите для раскрытия.
..Тогда просто в css hover, курсив, да слой тень на плетень
rikitiki
Специалист
- #5
Глянeул в файербаге как сделано.
То что выделено надо в ссылку добавить и выводить при hover:
<div data-hash=»4 гриба» id_goods=»15″>
<img src=»http://pomodoro.od.ua/files/goods/middle_bez-imeni-3.jpg»>
<a href=»#»>
<div>
<span> Белые грибы, Вешанки, Шампиньоны, Фирменный белый соус, Лисички с зеленью </span>
</a>
<div></div>
<span>код товара: 15</span>
</div>
.
display: none;
font-size: 12px !important;
text-transform: lowercase;
top: 78px;
width: 180px;
}
Руслан066
Новичок
- #6
rikitiki написал(а):
Глянeул в файербаге как сделано.
То что выделено надо в ссылку добавить и выводить при hover:
}Нажмите для раскрытия…
Если Вы не против, давайте разберемся какие файлы следует изменить для этого и что куда прописывать.
Я полагаю следует создать див.дескрипшн в каком-то .php файле, затем прописать ему стиль в каком-то .css файле.
Как называются эти файлы?
Помодоро — этом устаревший модх версии до 2010 года, я буду делать на вукумерс свежей версии и вп.
http://themeforest.net/item/sellya-responsive-woocommerce-theme/full_screen_preview/5418581
вот еще пример, очень нравится, так аккуратно сделано, хочу повторить.
Руслан066
Новичок
- #7
rikitiki написал(а):
Глянeул в файербаге как сделано.
То что выделено надо в ссылку добавить и выводить при hover:
}Нажмите для раскрытия…
Попробовал повторить урок с вашей ссылки, чтобы разобраться во всем.
1. Добавил в functions скрипт — появилось короткое описание в конце вывода товара.
2. Добавил в styles — скрытие этого описания — ничего не происходит.
3. Добавил в footer — скрипт при наведении — ничего не происходит.
rikitiki
Специалист
- #8
Я вам в первом посте ссылку дал на статью своего сайта.
Там два кода для вставки в витрину. Если хотите полями выводить то вставьте первый, а если кратким описание то второй. Первый более универсален так как идёт как бы дополнением.
Когда в витрине повится то спрячьте его display.none.
Но есть одна тонкость для вашего случая — описание должно выводиться в теге a, в коде же оно под тегом. В моём случае это было безразлично поскольку не загораживает ссылку.
Не уверен, но возможно последовательность во втором коде можно поправить изменив девятку.
Дайте время вспомнить, подумать обмозговать. Возможно форумчанин seachпman появится и даст совет. Он лучше моего php знает.
rikitiki
Специалист
- #9
Руслан066 написал(а):
Попробовал повторить урок с вашей ссылки, чтобы разобраться во всем.
1. Добавил в functions скрипт — появилось короткое описание в конце вывода товара.
2. Добавил в styles — скрытие этого описания — ничего не происходит.
3. Добавил в footer — скрипт при наведении — ничего не происходит.Нажмите для раскрытия…
1 — это правильно.
2 — в простейшем случае путь указывается .woocommerce ul.products li.product div.short_description,
но может повлиять тема и плагины. Надо глянуть в файербаге. Было бы проще если вы дали ссылку на вашу витрину.
3.- В футер ничего добавлять не нужно. Это для случая когда hover через скрипт выводится, а у вас через css/
Руслан066
Новичок
-
- #10
rikitiki написал(а):
Я вам в первом посте ссылку дал на статью своего сайта.
Нажмите для раскрытия…
http://themeforest.net/item/flatsome-responsive-woocommerce-theme/full_screen_preview/5484319
Вот тема, которая мне понравилась, пробейте пожалуйста, вот этот путь:
.woocommerce ul.products li.product div.short_description{
display: none;
}
Походу «.woocommerce ul.products li.product» здесь, должно быть что-то другое, потому что «Короткое описание появляется, но не скрывается» думаю ошибка в пути, если решим это, ваш урок получиться, а hover уже сам додумаю как сделать.
И вы не подскажите есть ли файл в WooCommerce подобной структуры:
— Product Title
— Featured Image
— Price
— Add to cart button
Что бы я мог сам настроить отображение товара.
АП:
посмотрите заодно пожалуйста уже и как называется картинка товара
$(‘.woocommerce ul.products li’).mousemove(function(event) { // li — элемент при наведении на который показывается текст
для этого.
rikitiki
Специалист
- #11
У-у-у… Flatsome. Сегодня уже видел варианть в соседней теме.
И три блока хавером выводятся, а вы ещё собираетесь четвёртый повесить. Выделил их жирным. Два в теге как вам нужно, а третий вне тега как у вас сейчас
<ul>
…….
<li>
<div>
<a href=»http://flatsome.uxthemes.com/product/beyond-top-nly-trend/»>
<div>
<div>
<div>
<img alt=»917542-0001_2″ src=»http://41hmj38vkl98fqzebjp1112g.wpe…ds/sites/2/2013/08/917542-0001_2-247×300.
jpeg»>
</div>
<div data-prod=»149″>Quick View</div>
</div>
</a>
<div>
</div>
</li>
Сотвеетственно, если от тега li плясать то до обратной картинки то что в теге a li.product-small grid1 grid-normal div.inner-wrap a div.back-image, а вне тега ка к кувас сейчас: li.product-small grid1 grid-normal div.inner-wrap a div.info style-grid1.
Но это на демо http://themeforest.net/item/flatsome-responsive-woocommerce-theme/full_screen_preview/5484319
А у вас может быть в зависимости от настроек другой путь.
rikitiki
Специалист
- #12
Руслан066 написал(а):
И вы не подскажите есть ли файл в WooCommerce подобной структуры:
— Product Title
— Featured Image
— Price
— Add to cart button
Что бы я мог сам настроить отображение товара.Нажмите для раскрытия…
Настройки могут быть в редактроре темы, может в каких-либо плагинах, но лучше установите файербаг, выделив какой-либо требуемый элемент и узнайте класс или id. А потом вносите правки в css.
Войдите или зарегистрируйтесь для ответа.
Поделиться:
WhatsApp Электронная почта Ссылка
html — CSS Hover только на текст?
Задавать вопрос
спросил
Изменено 2 года, 3 месяца назад
Просмотрено 10 тысяч раз
Если у меня есть следующий HTML-код с пользовательским классом CSS:
.
custom_list_item {
черный цвет;
}
.custom_list_item:наведите {
красный цвет;
} Test
Таким образом, при наведении курсора на все поле текст становится красным. Есть ли способ убедиться, что это происходит только при наведении курсора только на сам текст?
- HTML
- CSS
- текст
- наведение
3
Завернуть в диапазон . p растянется на всю ширину div .
.custom_list_item {
черный цвет;
}
.custom_list_item диапазон: наведение {
красный цвет;
} Тест
1
Оберните его в диапазон, затем введите стиль:
.custom_list_item {
черный цвет;
}
.custom_list_item диапазон: наведите {
красный цвет;
} <дел>
Тест
2
Измените свойство display этого div с block на inline-block .
Никаких дополнительных элементов, таких как пролеты, не требуется.
.custom_list_item {
черный цвет;
дисплей: встроенный блок;
}
.custom_list_item:наведите {
красный цвет;
} Test
Элементы Div по умолчанию являются элементами блочного уровня и занимают всю ширину своего родительского элемента.
Вы можете обернуть диапазон для своего div и установить диапазон: hover
.custom_list_item {
черный цвет;
}
диапазон: наведите {
красный цвет;
}
дел {
граница: 3 пикселя сплошного красного цвета;
} Тест
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
css — HTML-таблица обрезает длинный текст и показывает полный текст при наведении/щелчке
Во-первых, я знаю, что есть несколько тем на эту тему, но у меня ничего не получилось.
Я пробовал следующее:
— Отображение усеченного текста при наведении курсора с использованием многоточия CSS перекрывает текст под ним
— Обрезка длинного текста внутри ячеек таблицы HTML, отображение всего содержимого при наведении курсора
— И несколько решений, которые я придумал сам.
Но ни один из них не сработал, так что я здесь.
Я пытаюсь создать таблицу HTML/CSS, которая может содержать длинный текст, но она обрезается, когда длина текста превышает ширину ячейки. Я установил ширину в своем коде. Но, когда вы наводите курсор/нажимаете на текст (неважно какой), текст должен отображаться полностью, и строка таблицы также может быть выше для этого.
Мой код: JSFIDDLE: https://jsfiddle.net/bcuhtvdm/
index.php: (соответствующий код)
| Лорем | ипсум | Лорем | ипсум | Лорем | ипсум | Лорем | ипсум | <й>|
|---|---|---|---|---|---|---|---|---|
| Лорем ипсум | Лорем ipsum dolor sedum | садипсцирующий элитр | клита Касд | клита Касд | diam voluptuabcdefghijklmnopqrstuvwxyz | диаметр седла | Оценка Санктуса | |
| Лорем ипсум | Лорем ipsum dolor sedum | садипсцирующий элитр | клита Касд | клита Касд | Диам Волуптуа | диаметр седла | Оценка Санктуса |
