О jQuery, почему mouseenter() на <input> не работает?

Question

Спасибо за проверку моего сообщения первым!

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.

Также, это можно использовать, используя только cssh2: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>

Answer 2

Ну, чтобы избежать путаницы, что ваш mouseenter не работает на элементах входного типа. Это не так. Оно работает . Вы можете увидеть here. Как сказано выше в ответе, лучше изменить текст рядом с переключателем css.