Выпадение краткого описание при наведении на карточку товара на витрине как?

Question

[Aieron]

Здравствуйте, подскажите пожалуйста как на modx реализовать вот такой эффект https://www.ikea.com/ru/ru/catalog/categories/depa... как на столах, при наведении выпадает блок с описанием и кнопка. Introtext выведен, но он пока под ценой просто, а мне нужно его спрятать и чтобы появлялся он только при наведении мышки. Я понимаю, что это hover но не понимаю как прописать((( В коде div intro нужно выводить и кнопку другую .. подскажите пожалуйста, кому не жалко.

<div class="row ms2_product">
    [[!getAvailability?&product=`[[+id]]`]]
    <form method="post" class="ms2_form">
        <a href="{$id | url}">
    {if $small}
        <div class="img_wrap"><img src="{$small}" alt="{$pagetitle}" title="{$pagetitle}"/></div>
    {elseif $image?}<div class="img_wrap"><img src="{'phpThumbOn' | snippet : ['input' => ($image), 'options' => 'wl=200&hp=200&hs=200']}" alt="{$pagetitle}" title="{$pagetitle}"/></div>
    {else}<div class="img_wrap"><img src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png"
             srcset="{'assets_url' | option}components/minishop2/img/web/[e-mail] 2x"
             alt="{$pagetitle}" title="{$pagetitle}"/></div>
    {/if}
           
            <p>{$pagetitle}</p>
     </a>
            {if $introtext}
                    <div class="intro">
                        <small>{$introtext | truncate : 200}</small>
                    </div>
                {/if}
        <div class="price">
    {if $old_price>0}
                <span class="old">{$old_price} {'ms2_frontend_currency' | lexicon}</span>
                <span class="perc">{ceil((($price-$old_price)*100)/$old_price)}%</span>
                <span class="new">{$price} {'ms2_frontend_currency' | lexicon}</span>
    {else}
                <span class="current">{$price} {'ms2_frontend_currency' | lexicon}</span>
    {/if}
            </div>
        [[+qty:is=`0`:then=`<a href="{$id | url}" class="btn link"><i class="fa fa-shopping-cart"></i><span class="no-mobile">Купить</span></a>`:else=`<button class="btn addcart" type="submit" name="ms2_action" value="cart/add"><i class="fa fa-shopping-cart"></i><span class="no-mobile">Купить со склада</span></button>`]]
        <input type="hidden" name="id" value="{$id}">
        <input type="hidden" name="count" value="1">
        <input type="hidden" name="options" value="[]">
        <a class="msfavorites" data-click data-data-id="{$id}" data-data-list="default" data-msfavorites-mode="list">
          <i class="fas fa-align-left"></i><span class="msfavorites-text-load">секунду</span><span class="msfavorites-text-add no-mobile">В избранное</span>
          <span class="msfavorites-text-remove no-mobile">Удалить из списка</span>
		</a>
		<!--   -->
        <!--!addComparison?&list_id=`29`&id=`{$id}`-->
    </form>
</div>

Comments

[petyagrill]

Ваша задача не завязана на MODX. Вам нужны теги связанные с версткой.

Answer 1

[MilesPs]

Ваша задача не связана ни с modx ни любой другой cms. Можно даже не использовать jQuery и тд и тп. Вам будет достаточно посмотреть в сторону css... всё реализовывается на нём.

простой пример. Должен объяснить суть - jsfiddle.net/w8rxj32m/26

Comments

[Aieron]

Большое спасибо, это действительно то, что надо. Всё получилось.
Для тех, кто будет искать аналогичный ответ, в стилях, чтобы предыдущий блок не просвечивал overflow:hidden надо написать) бэкграунд задать, у меня белый соппсно и z-index возможно понадобится.
может я и лишнего нагородила, но блин работает как надо) Вроде. Пока эксплоэр не открыла)))

[MilesPs]

Это просто пример. Не является решением. Вёрстка требует переработки и доработки. Но в целом суть должна быть понятна.

Answer 2

[FKV]

Пишу с телефона поэтому не могу посмотреть икеевский пример, но думаю вам надо сделать примерно следующее:
Сначала,блоку с кратким описанием поставить display:none и наверное ещё стили для позиционирования элемента.
Потом jQuery:
$(document).ready(function(){
$('селектор_элемента_на_который_надо_наводить').hover(function(){
$('селектор блока краткого описания').show();
}, function(){
$('селектор_блока_краткого_описания').hide();
});
});

Comments

[Aieron]

спасибо большое очень, но мне css нужно было) решение MilesPs предоставил. К сожалению, я с jquery пока на вы, и не совсем понимаю как это и куда внедрить. но обязательно разберусь.