html如何实现鼠标悬停显示文字，鼠标移走文字消失。

Posted 2023-02-28

参考技术A

1、方法一，利用html特性，每个标签都有一个title属性。当鼠标hover在该标签内容上时，浏览器展示出该标签的title内容，让鼠标移走，内容消失，如下：

div

height:100px;

width:100px;

background-color: aqua;

<div title="我是鼠标悬停展示的内容">文字内容文字内容</div>

2、方法二，利用css的伪类hover，以及显示隐藏属性display，来实现如下：

.continer

height:100px;

width:100px;

background-color: aqua;

.continer div

display:none;/*默认隐藏*/

.continer:hover div

display:initial;/*当鼠标hover时展示*/

<div class="continer">

文字内容文字内容

<div>我是鼠标悬停展示的内容</div>

</div>

扩展资料：

1、鼠标悬停会触发的一系列：

1）css伪类，:hover为鼠标悬停时触发的伪类，可利用该伪类实现，背景色，颜色，字体，边框，动画，过渡效果等元素属性的变化。

2）js当鼠标悬停，会触发mouseover事件。可在事件回调函数中处理对应的逻辑。

2、关于html标签title属性的作用：多用来完全展示hover的元素的内容，有些页面标题等内容过多会加省略号，而无法看到全部内容，会用到title。