如何在禁用按钮上的鼠标悬停时显示 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 悬停时将其设置为display: block;

Answer 2

禁用按钮意味着关闭它们的交互性。虽然这是一种不同的方法，但您可能希望使用 CSS 达到预期的效果以提高浏览器速度。

button[disabled] + .main {
    display: none;
}

button[disabled]:hover + .main {
    display: block;
}

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

Answer 3

情况：

在 HTML 中，disabled 元素不会触发任何事件，也不会对用户操作做出反应，它们只是以灰色文本显示。

您可以在disabled MDN specification 中看到：

如果元素被禁用，它不会响应用户操作，无法聚焦，并且不会触发命令事件。

解决方案：

你为什么不简单地使用标题属性title="this is a div"？！

<button id="btn" title="this is a div" disabled>Search</button>

这是一个简单的 Demo sn-p：

<button id="btn" title="this is a div" disabled>Search</button>