使用Vue来实现鼠标悬停效果

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章