使用Vue来实现鼠标悬停效果
使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令(简写为:@)来完成。为标签绑定mouseenter以及mouseleave事件即可。<span> 计算机 </span><span class="sort-item" @mouseenter="setSortHover"> 全部 </span><span class="so...
·
使用Vue来实现鼠标悬停效果。
可以使用事件处理器v-on指令(简写为:@)来完成。
为标签绑定mouseenter以及mouseleave事件即可。
<span> 计算机 </span>
<span class="sort-item" @mouseenter="setSortHover"> 全部 </span>
<span class="sort-item" @mouseenter="setSortHover"> 计算机基础与应用 </span>
<span class="sort-item" @mouseenter="setSortHover"> 网络安全与技术 </span>
<span class="sort-item" @mouseenter="setSortHover"> 软件工程 </span>
<script>
/**
* 这里是写在Vue的方法里面的代码
* 设置分类搜索的hover监听事件
*/
setSortHover: function () {
$(".sort-item").hover(function(){
$(this).css("color","white");
$(this).addClass("skin-bg")
}, function(){
$(this).css("color","#333333");
$(this).removeClass("skin-bg")
});
}
</script>
大概的效果
JQuery的内容参考这个地址:
https://www.runoob.com/jquery/event-hover.html
参考的文章:
https://blog.csdn.net/qq_33270001/article/details/81808738
更多推荐
已为社区贡献2条内容
所有评论(0)