一、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>