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

大概的效果
使用Vue来实现鼠标悬停效果_第1张图片

JQuery的内容参考这个地址:
https://www.runoob.com/jquery/event-hover.html

参考的文章:
https://blog.csdn.net/qq_33270001/article/details/81808738

你可能感兴趣的:(vue)