一、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>
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/194056.html
微信扫一扫 
支付宝扫一扫 