Как замедлить появление :hover через JS?

Question

[Константин Хаиров]

Всем привет , подскажите пожалуйста способ задержки появления блока через :hover на 2-3 секунды . Вот код

<div class="short-film">
    <div class="img-block border-2" style="background:url('http://sitename.ru/d/2016/11/58381fb040235.jpg');background-size:cover;">
        <div class="text-block">
            <p class="opis">Конец света 2013: Апокалипсис по-голливудски в Тас-икс</p><br>
            
            <div style="margin-left:200px;background-color:#f1f1f1;height:295px;margin-top:-17px;">
              <ul style="padding-left:10px;">
                  <li style="font-size:15px;color:#000;">Название : Конец света 2013: Апокалипсис по-голливудски</li>
                  <li style="font-size:15px;color:#000;padding-top:5px;">Жанр : <a href="sitename.ru/russian/fentezi/">Фэнтези</a>                                      / <a href="sitename.ru/russian/komediya/">Комедия</a></li>
                  <li style="font-size:15px;color:#000;padding-top:5px;">Год выпуска :<a href="sitename.ru/xfsearch/amf-year/2013/">2013</a></li>   
                <li style="font-size:15px;color:#000;padding-top:5px;">Страна :<a href="sitename.ru/xfsearch/amf-country/%D1%D8%C0/">США</a></li>  
                </ul>
                            <p class="text" style="font-size:15px;height:70px;">Джей Барушель приезжает в&nbsp;Лос-Анджелес, чтобы посетить старого друга и&nbsp;коллегу, актера Сета Рогена, который пригласил Барушеля на&nbsp;новоселье, которое организовывает Джеймс Франко. ...</p>

                
            </div>
            
           
            
            <div class="ratin" style="left:210px;">   
<div class="mwrating" style="margin: 10px 0px 0px 0px;">
    <div class="wmminus"><a href="#" onclick="doRate('minus', '967'); return false;"></a></div>
    <div class="mwrat" style="color:#000;"><span id="ratig-layer-967" class="ignore-select"><span class="ratingtypeplusminus ignore-select ratingzero">0</span></span></div>
    <div class="wmplus"><a href="#" onclick="doRate('plus', '967'); return false;"></a></div>
</div>

          </div>
            <a href="sitename.ru/russian/fentezi/967-konec-sveta-2013-apokalipsis-po-gollivudski.html" title="Смотреть фильм" class="look-movie border-3">Смотреть</a>
        </div>
    </div>
    <h5><a href="sitename.ru/russian/fentezi/967-konec-sveta-2013-apokalipsis-po-gollivudski.html" class="full-link border-2" title="Конец света 2013: Апокалипсис по-голливудски">Конец света 2013: Апокалипсис по-голливудски</a></h5>
    <div class="clr"></div>
</div>

Проблема в том что это вывод тем на сайте , и они стоят рядом . При наведении появляется блок рядом с небольшим описанием , но этот блок перекрывает следующую тему и для того что бы посмотреть описание второй темы нужно навести сначала на 3-ию .
Как можно замедлить Hover эффект хотя-бы на 2-3 секунды . Заранее спасибо .

P.S Пробовал transition не помогло

Comments

[Kovalsky]

Объясните фразу "Пробовал transition не помогло"

[Kovalsky]

Вот transition, и вроде бы все работает

[Константин Хаиров]

Никита Полевой: Вот сам сайт kino.poigraem.uz (Картинки у вас работать не будут) . Пробовал добавлять даже те же самые правила что и в вашем примере все равно появление сразу при наведении и без задержки .

[Виктор Янышев]

Константин Хаиров: повесь на все tooltips событие mouseover и вызывает его через нужный промежуток времени setTimeout. А для плавности появления используй transition: opacity от 0 до 1.0

[Kovalsky]

Константин Хаиров: я тоже сделал всё как в примере, у меня работает:

Вот

[Константин Хаиров]

Никита Полевой: Все ясно сейчас по ковыряюсь в шаблоне . Спасибо большое за помощь .

Answer 1

[Егор Огурцов]

Как-то так можно - https://jsfiddle.net/9pe4njcs/

Answer 2

[Артём]

Можно поставить transition: 2s.

Answer 3

[Фёдор Гребенников]

htmlbook.ru/css/transition-delay