JS выпадающий текст по блокам
Рубрики :Кладовка
Выпадает текст при наведении мышкой.
Пример (если ещё работает): https://codepen.io/vbond2603/pen/LWgVQK
Только там нужно заменить display:inline-block на float:left.
HTML:
<div class="product-thumb"> <div class="caption"> <h4>Заголовок</h4> <p class="price">200$</p> </div> <div class="toogle"> <p>Описание Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis impedit eos similique recusandae asperiores odit, et, nam deleniti ab voluptas?</p> </div> </div> <div class="product-thumb"> <div class="caption"> <h4>Заголовок</h4> <p class="price">200$</p> </div> <div class="toogle"> <p>Описание Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis impedit eos similique recusandae asperiores odit, et, nam deleniti ab voluptas?</p> </div> </div> <div class="product-thumb"> <div class="caption"> <h4>Заголовок</h4> <p class="price">200$</p> </div> <div class="toogle"> <p>Описание Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis impedit eos similique recusandae asperiores odit, et, nam deleniti ab voluptas?</p> </div> </div>
CSS:
.product-thumb { padding: 20px; margin: 50px; float: left; background: #eee; width: 200px; cursor: pointer; }
JS:
$('.toogle').hide(); $('.product-thumb').hover( function() { $(this).find('.toogle').show().stop() }, function() { $(this).find('.toogle').hide().stop(); });
Результат: