悬停和焦点需要在一起

Question

我试图将鼠标悬停并显示时显示跨度，但是我无法将这两种方法绑定在一起。这是一段代码。每个帮助或指导都应得到赞赏：)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#101").hover(
  function(){ $("#spn1").css("color", "red").show();
   });


   $("#101").focusin(function(){
    $("spn1").css("color", "red").show();
  });
  $("#101").focusout(function(){
    $("#spn1").css("color", "red").hide();
  });

});
</script>


<input type="text" id="101"><span style="display:none;" id="spn1">limit 0-100</span>

Answer 1

用下面的一些input包裹span和div。将div类用于hover和focusin。

$(document).ready(function() {
  $(".someClass").hover(
    function() {
      $("#spn1").css("color", "red").show();
    });
  $(".someClass").focusin(function() {
    $("#spn1").css("color", "red").show();
  });
  $(".someClass").focusout(function() {
    $("#spn1").css("color", "red").hide();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='someClass'>
  <input type="text" id="101"><span style="display:none;" id="spn1">limit 0-100</span>
</div>