关于 jQuery，为什么 <input> 上的 mouseenter() 不起作用？

Question

感谢您先查看我的 post！

mouseenter() 适用于标签 h2，但不适用于 <input>。你能告诉我我的代码有什么问题吗？

$(document).ready(function() {
  $("h2").mouseenter(function() {
    $(this).css("background-color", "green");
  });

  $("input").mouseenter(function() {
    $(this).css("background-color", "green");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <h2>Select Gaming Time:</h2>
  <form method="post">
    <input type="radio" name="time" value="5">5 Minute (Hard) &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" name="time" value="8">8 Minutes (Normal) &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" name="time" value="10">10 Minutes (Easy)
  </form>
</div>

Answer 1

您目前正在尝试将单选按钮的背景变为绿色。不幸的是，这无法完成。但是，您可以将标签中收音机旁边的文本包裹起来，并将标签的背景变为绿色。

作为一个额外的好处，您还可以使用 for="" 属性和相应的 id=""s 使标签可点击。

此外，这可以仅使用 css h2:hover, label:hover { background- color: green; } 来完成。为您节省大量加载字节！

一个。从这个 jsfiddle 复制过来的 Wolff 代码：

$(document).ready(function () {
    $("h2").mouseenter(function () {
        $(this).css("background-color", "green");
    });

    $("label:has(:radio)").mouseenter(function () {
        $(this).css("background-color", "green");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    
<h2>Select Gaming Time:</h2>

    <form method="post">
        <label for="time_5">
            <input type="radio" name="time" value="5" id="time_5">5 Minute (Hard) &nbsp;&nbsp;&nbsp;&nbsp;</label>
        <label for="time_8">
            <input type="radio" name="time" value="8" id="time_8">8 Minutes (Normal) &nbsp;&nbsp;&nbsp;&nbsp;</label>
        <label for="time_10">
            <input type="radio" name="time" value="10" id="time_10">10 Minutes (Easy)</label>
    </form>
</div>

Answer 2

为了避免您混淆 mouseenter 不适用于输入类型元素。事实并非如此。有用。你可以看到 here 。如上面的答案所述，最好将 css 更改为单选按钮旁边的文本。

关于 jQuery，为什么 <input> 上的 mouseenter() 不起作用？

About jQuery, why does the mouseenter() on a <input> not work?

jquery

mouseenter