使用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>