天天看点

jQ实现鼠标移入移出事件

效果:

HTML:

<li style="overflow-y: scroll;overflow-x: scroll;"><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
               class="el">模板一</label><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
               class="el">模板二</label><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
               class="el">模板三</label><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
               class="el">模板四</label><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
               class="el">模板五</label><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
               class="el">模板六</label><label style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
               class="el">模板七</label></li>      

JS:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>      
var els= document.getElementsByClassName("el");
$(".el").each(function(index) {
  //移入事件
  $(this).mouseenter(function(obj) {
    els[index].style.backgroundColor = "#DBDBDB";
  });

})
$(".el").each(function(index){
  //移入事件
  $(this).mouseleave(function(obj){
    els[index].style.backgroundColor = "#FFFFFF";
  });
})      

完整代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>如果您是需要雨伞可以去淘宝搜索:华诚荣邦百货</title>
  </head>
  <body>
    <div>
      <li style="overflow-y: scroll;overflow-x: scroll;"><label
          style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
          class="el">模板一</label><label
          style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
          class="el">模板二</label><label
          style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
          class="el">模板三</label><label
          style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
          class="el">模板四</label><label
          style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
          class="el">模板五</label><label
          style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
          class="el">模板六</label><label
          style="display:inline-block;border-bottom: 1px solid #ccc;width: 120%;height:40px;line-height: 40px;"
          class="el">模板七</label></li>
    </div>
  </body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
    var els = document.getElementsByClassName("el");
    $(".el").each(function(index) {
      //移入事件
      $(this).mouseenter(function(obj) {
        els[index].style.backgroundColor = "#DBDBDB";
      });

    })
    $(".el").each(function(index) {
      //移入事件
      $(this).mouseleave(function(obj) {
        els[index].style.backgroundColor = "#FFFFFF";
      });
    })
  </script>
</html>      

最后,祝大家圣诞节快乐!