使用jq实现鼠标移入移出显示和隐藏效果

一、vue鼠标移入移出显示和隐藏

vue提供了v-show和v-if指令来实现鼠标移入移除显示和隐藏。v-show指令通过控制元素的display属性来实现，v-if指令通过将元素从DOM中移除来实现。以下是一个使用v-show指令实现鼠标移入移出显示和隐藏的例子:

  <div id="app">
    <div v-show="showDiv" @mouseenter="showDiv=true" @mouseleave="showDiv=false">
      <p>这是需要显示和隐藏的元素</p>
    </div>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        showDiv: false
      }
    });
  </script>

二、鼠标移入显示移出隐藏

如果不使用JavaScript框架，可以使用CSS:hover选择器来实现鼠标移入显示和移出隐藏效果。以下是一个使用CSS实现的例子:

  <style>
    #div1 {
      display:none;
    }
    #div1:hover {
      display:block;
    }
  </style>

  <div id="div1">
    <p>这是需要显示和隐藏的元素</p>
  </div>

三、jq鼠标移入移出切换事件

使用jQuery可以轻松实现鼠标移入移出切换事件，可以使用jQuery的hover()方法或者mouseenter()和mouseleave()方法来实现。以下是使用hover()方法实现鼠标移入移出切换事件的例子:

  <script src="jquery-3.5.1.min.js"></script>

  <div id="div2">
    <p>这是需要显示和隐藏的元素</p>
  </div>

  <script>
    $('#div2').hover(function() {
      $(this).addClass('showDiv');
    }, function() {
      $(this).removeClass('showDiv');
    });
  </script>

  <style>
    .showDiv {
      display: block;
    }
    #div2 {
      display: none;
    }
  </style>

四、jq鼠标移入移出效果选取

当需要选取多个元素实现鼠标移入移出效果时，可以使用jQuery的each()方法遍历选中的元素，然后使用hover()或mouseenter()和mouseleave()方法为每个元素添加事件处理程序。以下是使用each()方法实现鼠标移入移出效果的例子:

  <script src="jquery-3.5.1.min.js"></script>

  <div class="divClass">
    <p>这是需要显示和隐藏的元素1</p>
  </div>

  <div class="divClass">
    <p>这是需要显示和隐藏的元素2</p>
  </div>

  <div class="divClass">
    <p>这是需要显示和隐藏的元素3</p>
  </div>

  <script>
    $('.divClass').each(function(index) {
      $(this).hover(function() {
        $(this).addClass('showDiv');
      }, function() {
        $(this).removeClass('showDiv');
      });
    });
  </script>

  <style>
    .showDiv {
      display: block;
    }
    .divClass {
      display: none;
    }
  </style>