Question

$(document).ready(function () {
    $(".req_sent").hover(function () {
        $(".drop").toggle("hover");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
<div class="profile_btnn">
    <button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
	<p>hello</p>
</div>

我有一个简单的button，即Sent。现在，当我将鼠标悬停在Sent按钮上然后显示div即<div class="drop">时，我实际上想要的是什么，但是当我将光标从Sent按钮移到<div class="drop">时它隐藏了。

现在，当我将鼠标悬停在<div class="drop">上时，如果我将鼠标从Sent上移开，它会再次隐藏。那么，我该怎么做？请帮助我。

谢谢

Answer 1

您可以尝试在下面的代码中将鼠标悬停在drop按钮上时显示sent。在drop悬停时，什么都不要做，只能在离开drop时将其隐藏

$(document).ready(function () {
        $(".req_sent").hover(function(){
            $(".drop").show();
        });
        $(".drop").hover(function(){
            //do nothing
        }, function(){
            $(this).hide();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
    <button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
    <p>hello</p>
</div>

Answer 2

你在这里

<div class="profile_btnn">
    <button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
    <div class="drop" style="display:none;">
        <p>hello</p>
    </div>
</div>
<script>
 $(document).ready(function () {
   $(".profile_btnn").hover(function(){
     $(".drop").toggle("hover");
   });
 });
</script>

Answer 3

您想从div按钮中保持可见的Sent事件鼠标。当鼠标悬停在div

上时隐藏

只需不用toggle()并应用show()即可完成。

请检查以下代码：

$(document).ready(function () {
    $(".req_sent").hover(function () {
        $(".drop").show('slow');
    });
    $(".drop").hover(function () {
        $(".drop").hide('slow');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
<div class="profile_btnn">
    <button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
	<p>hello</p>
</div>

切换jquery后如何留在div上？

3 个答案: