Question

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

＆＃13;

$(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" });
    	})
    	});
    })

＆＃13;

<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>

＆＃13;

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 fopen元素中，不会触发任何事件，也不会对用户操作做出反应，它们只会显示为灰色文本。

您可以在disabled MDN specification中看到：

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

<强>解决方案：

为什么不简单地使用title属性disabled？！

title="this is a div"

这是一个简单的演示片段：

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

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

3 个答案: