Question

感谢您先检查我的帖子！

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您目前正在尝试将单选按钮的背景变为绿色。不幸的是，这是无法做到的。但是，您可以将文本旁边的文本包装在标签中，然后将标签的背景变为绿色。

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

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

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

$(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（）不起作用？

2 个答案: