Question

下午好，

我试图在用户将鼠标悬停在特定div上时创建一个slideDown效果，然后当用户将鼠标悬停在div上时返回。请注意代码是用Bootstrap4编写的，我也不确定这是否有所不同。

＆＃13;

$(document).ready(function () {
    'use strict';
    
    $("p.card-text").on("mouseover", function () {
        $(this).slideDown();
    });
    $("p.card-text").on("mouseout", function () {
        $(this).slideUp();
    });
});

＆＃13;

<div class="card">
    <a href="http://www.castro4designs.com" target="_blank"><img src="img/home.png" height="240" width="356" alt="4Design Home Page"></a>
    <p class="card-text">Castro4design.com was my first official website which was done for my 'Intro to New Media Tech' class. The site consist of basic HTML and CSS. The site was to keep track of all our work throughout our college career.</p>
</div>

＆＃13;

Answer 1

当目标不再可见时，您不能将鼠标悬停在目标上。但您可以使用父元素（我已将其更改为mouseenter和mouseleave）：

$(document).ready(function () {
    'use strict';
    
    $(".card").on("mouseenter", function () {
        $('.card-text',this).slideDown();
    });
    $(".card").on("mouseleave", function () {
        $('.card-text',this).slideUp();
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
    <a href="http://www.castro4designs.com" target="_blank"><img src="img/home.png" height="100" width="106" alt="4Design Home Page"></a>
    <p class="card-text">Castro4design.com was my first official website which was done for my 'Intro to New Media Tech' class. The site consist of basic HTML and CSS. The site was to keep track of all our work throughout our college career.</p>
</div>

Answer 2

你也可以试试这个：

$( "#card" ).click(function() {
   $( "#card_text" ).slideToggle( "slow", function() {
       //other code
   });
});

或者

$( "#card" ).click(function() {
    $( "#card_text" ).slideToggle( "slow" );
});

Answer 3

您可能希望绑定到父div的事件。也可以使用涵盖事件的hover()和适用于两个方向的slideToggle()

$(".card").hover(function () {
    $(this).find('p.card-text').stop(true, true).slideToggle();
})

我怎样才能让我的文字与jQuery一起滑落？

3 个答案: