鼠标悬停时div打开和关闭速度

I need to delay opening and closing a div smoothly when mouse hover.this is my code,

我需要在鼠标悬停时顺利延迟打开和关闭div。这是我的代码,

function show_panel1()
{
document.getElementById('hoverpanel1').style.display="block";
}

function hide_panel1()
{
document.getElementById('hoverpanel1').style.display="none";
}

<div class="col-sm-4 slideanim" onMouseOver="show_panel1()" onMouseOut="hide_panel1()">
      <div class="thumbnail panel">
        <img src="images/hospital.jpg" alt="Paris">
        <h3><strong>Service1</strong></h3>
        <div class="" id="hoverpanel1" style="display:none;">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
          <h3 style="font-size:20px;">NEW PETS FOR SALE!</h3>
          <?php include"panelcarousel.php"; ?>
        </div>
      </div>
    </div>

I found this source but I have no idea how to use it. http://cherne.net/brian/resources/jquery.hoverIntent.html

我发现了这个来源,但我不知道如何使用它。 http://cherne.net/brian/resources/jquery.hoverIntent.html

1 个解决方案

#1

Use below snippet if it satisfies your requirement.

如果满足您的要求,请使用以下代码段。

function show_panel1()
{
$('#hoverpanel1').slideDown();
}

function hide_panel1()
{
$('#hoverpanel1').slideUp();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="col-sm-4 slideanim" onMouseEnter="show_panel1()" onMouseLeave="hide_panel1()">
      <div class="thumbnail panel">
        <img src="images/hospital.jpg" alt="Paris">
        <h3><strong>Service1</strong></h3>
        <div class="" id="hoverpanel1" style="display:none;">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
          <h3 style="font-size:20px;">NEW PETS FOR SALE!</h3>
          <?php include"panelcarousel.php"; ?>
        </div>
      </div>
    </div>