鼠标悬停事件_【CSS】鼠标悬停tips的实现

前端校招互助第三次群内讨论议题：鼠标悬停tips的实现

讨论的题目

实现一个鼠标悬停出现工具提示的效果
讨论区地址：https://www.yuque.com/kuwu/vgfxx6/mcuso8

实现的案例

https://jsbin.com/nevujitewi/1/edit?html,css,output
https://codepen.io/litstronger/pen/GRjpzay

一些技巧

可使用自定义属性来传入简单的提示信息

自定义数据属性 它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。
用法很简单， data-* ，以掘金网的文章为例，想要存储一些不需要显示在浏览器上的额外信息的时候就使用了自定义属性。 article 标签上有 data-entry-id 和 data=draft-id ,这两个就是自定义属性，猜测是文章发布后的id和草稿态的id。
在CSS中可以通过 attr 属性访问到自定义属性，使用方式如下：

<a href="#" class="tips" data-title="工具提示" data-dir="top">向上a>
.tips::before {
  content: attr(data-title);
  padding: 0.3em;
  border-radius: 5%;
  color: #fff;
  background: #000;
}

在JavaScript中可以通过 getAttribute() 方法来获取自定义属性的值，也可以通过 dataset 访问。

<a href="#" class="tips" data-title="工具提示" data-dir="top">向上a>
var a = document.querySelector('a.tips')
a.dataset.title = '修改title'

所以在简单场景下的tips提示可以通过自定义属性去实现，而且方便通过js去修改提示信息。

padding margin border 的颜色

• padding 颜色和content颜色一致
• border可以有自己的颜色，默认是黑色
• margin为无色

使用border实现一个简单的三角形

将 width 和 height 设置为0，然后设置 border 的 size 和 color 来控制三角形的大小和颜色，当只需要下方的三角形的时候，可以设置其他三个三角形为透明，然后只保留 border-bottom 的颜色来实现，以此类推。

通过绝对定位实现布局

子绝父相 ，父元素相对定位，子元素绝对定位。 ::after 和 ::before 可以看成是对应 html 标签的子元素。通过 left top right bottom 来控制子元素相对于父元素的绝对定位。让tips出现在父元素的正上方。left=50% 让左边界到中心位置， bottom=100% 距离下边界100%的位置就是 content 的上方，让 before 的下方紧贴 content 的上边界。布局好了之后，通过 transform 调整 before 的偏移 transform: translateX(-50%)

.tips[data-dir="top"]::before {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}

使用em来适配字体的变化

1em 等于当前的字体尺寸。
2em 等于当前字体尺寸的两倍。
例如，如果某元素以 12pt 显示，那么 2em 是24pt。
在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。

.tips[data-dir="top"]::after {
  margin-bottom: -1em;
  border: 0.6em solid transparent;
  border-top-color: currentColor;
}

不相应鼠标事件

在使用 hover 的时候会出现这样的场景，当鼠标悬停出现 tips 的时候会遮挡住其他的操作符，而且同时 tips 响应鼠标悬停的时候会出现无法直接定位到操作符，带来体验上的不佳。

鼠标悬停在向左的 a 标签的时候，出现的 tips 遮住了向下的 a 标签

可以使用 pointer-events 属性来取消鼠标事件的响应

pointer-events:none

延迟出现tips

当鼠标移动较快的时候会出现下面的效果，虽然很流畅的出现了提示信息，但是体感很混乱，当复杂场景的时候可能就会有渲染的成本。可以通过设置动画延时来避免鼠标快速移动带来的影响
使用 transition: 0.15s 0.15s 来实现 transition

添加focus

有时候使用者会通过 tab 键来切换工具，这时候如果想要有提示效果，不仅要在 hover 的时候设置样式，同样要在 focus 的时候设置样式。

讨论群

欢迎大家加群讨论，访问我们的讨论区：https://www.yuque.com/kuwu/vgfxx6