About jQuery, why does the mouseenter() on a <input> not work? -
thanks checking post first!
the mouseenter()
working tag h2, not work on <input>
. tell wrong code?
$(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) <input type="radio" name="time" value="8">8 minutes (normal) <input type="radio" name="time" value="10">10 minutes (easy) </form> </div>
you trying turn radio button's background green. unfortunately can't done. can wrap text next radios in label , turn label's background green.
as added benefit can make label clickable using for=""
attribute , corresponding id=""
s.
also, this can done using css only h2:hover, label:hover { background- color: green; }
. saving lot of bytes load!
a. wolff's code copied on 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) </label> <label for="time_8"> <input type="radio" name="time" value="8" id="time_8">8 minutes (normal) </label> <label for="time_10"> <input type="radio" name="time" value="10" id="time_10">10 minutes (easy)</label> </form> </div>
Comments
Post a Comment