javascript - 如何在鼠标悬停在禁用按钮上时显示 div

Question

我一直在研究在禁用按钮上执行操作的要求。我想在禁用按钮上显示文本，我在 Jquery 中尝试过但它不起作用，下面是我尝试过的代码。

$(function(){
    	$(window).on("load", function () {
    	$('#btn').prop("disabled", true);
      
    	$("#btn[disabled]").mouseover(function(){
    	  $(".main").css({ "display": "block" });
    	  
    	})
    	$("#btn[disabled]").mouseout(function(){
    	  $(".main").css({ "display": "none" });
    	})
    	});
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button id="btn" disabled>Search</button>
    	<div class="main" style="display:none">
    		this is a div
    	</div>

Answer 1

您可以使用 CSS 代替，如下所示:

#hiddenDiv { display: none; }
#btn[disabled]:hover + #hiddenDiv { display: block; }

<button id="btn" disabled>Search</button>
<div class="main" id="hiddenDiv">
    this is a div
</div>

它所做的是最初将 hiddenDiv 设置为 display: none; 然后在 button 悬停时将其设置为 显示: block ；