鼠标移入显示，移出隐藏

最新推荐文章于 2024-02-06 16:42:24 发布

yuyaoyao19

最新推荐文章于 2024-02-06 16:42:24 发布

阅读量1.3k

点赞数

分类专栏：鼠标事件

本文链接：https://blog.csdn.net/yuyaoyao19/article/details/119517069

版权

鼠标事件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的一个常见结构，包括一个带有索引和文本内容的<div>元素，以及一个用于删除该内容的<span>元素。当鼠标悬停在元素上时，删除图标会显示，点击则调用'del'方法，通过传入的索引从数据列表中移除相应项。这段代码展示了如何在前端实现动态内容的增删功能。

摘要由CSDN通过智能技术生成

html代码：

<div class="addContent">
  <span class="addContentIndex"> {{index+1}}</span>
  <span class="addContentText">{{item.text}}</span>
  <span class="del" @click="del(index)"> x </span>
</div>

methods方法代码：

//删除每一条内容
del(id) {
  // console.log(id);
  this.list.splice(id, 1);
},

css代码：

.del{
  cursor: pointer;
  /*鼠标样式改成小手指*/
  display:none;
  /*每一行的删除符号，默认隐藏，鼠标移入才显示*/
  position: absolute;
  right:10px;
  top:2px;
  font-size: 16px;
  color:#999;
}
.addContent:hover .del{
  /* 鼠标移入后， 每一行的删除符号才显示*/
  display: block;
}

效果图：