關於jQuery，爲什麼mouseenter（）在<input>不起作用？

感謝您首先查看我的帖子！關於jQuery，爲什麼mouseenter（）在<input>不起作用？

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>

來源

2015-06-15 Spider

你想讓單選按鈕變成綠色還是其旁邊的文字？ – BillyNate

它在處理輸入元素http://jsfiddle.net/5wbLnaep/ –

@ Tushar：輸入是無線電的，而不是文本。收音機不能被稱呼那麼多。 – BillyNate

您正在試圖把單選按鈕的背景爲綠色。不幸的是，這是無法完成的。但是，您可以將標籤旁邊的文字包裝到標籤中，並將標籤的背景變爲綠色。

作爲附加好處，您還可以使用for=""屬性和相應的id="" s使標籤可點擊。

另外，這可以使用css只做h2:hover, label:hover { background- color: green; }。爲您節省大量的字節來加載！

A.沃爾夫的代碼從這個的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>

來源

2015-06-15 07:39:12 BillyNate

請參閱http://jsfiddle.net/eptnogk7/ –

感謝Wolff，我正在創建代碼並將其添加到帖子中。你的小提琴節省了我一些時間，再加上你的'has（：radio）'真的很棒！ – BillyNate

很好地避免你的困惑是mouseenter沒有輸入型元素的作品。事實並非如此。有用。你可以看到here。如上面在答案中所述，最好對css進行更改以改變單選按鈕旁邊的文字。

來源

2015-06-15 07:43:23

關於jQuery，爲什麼mouseenter（）在<input>不起作用？

回答

相關問題