实现隐藏元素的浮现，并带有一个小尖角（Web实践）

本文主要是介绍实现隐藏元素的浮现，并带有一个小尖角（Web实践），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

介绍

先来看看效果是什么样，我们打开B站来看看我们要实现什么样的效果。
在这里插入图片描述
如图中所展示的一样，当鼠标放上生活那个块元素的时候，会浮现一个选择框，并带有一个小的尖角。

效果

可以看看博主今天实现的效果：

在这里插入图片描述

代码

<!--* @Author: OriginalCoder* @Date: 2020-10-16 11:14:42* @version: * @LastEditTime: 2020-10-16 22:52:23* @LastEditors: OriginalCoder* @Description: 
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {position: relative;top: 100px;left: 300px;width: 80px;height: 30px;text-align: center;}.hiddenbox {position: relative;left: 300px;visibility: hidden;}.box:hover ~ .hiddenbox {position: relative;top: -4px;width: 80px;height: 60px;text-align: center;border-radius: 4px;background-color: rgb(243, 242, 242);visibility: visible;box-shadow: 0 10px 10px 0 #ddd;}.box1 {width: 78px;height: 30px;line-height: 30px;}.box:hover ~ .angle {position: relative;top: -4px;left: 329px;width: 0;height: 0;border-right: 10px solid transparent;border-left: 10px solid transparent;border-top: 10px solid rgb(243, 242, 242);}</style></head><body><div class="box">娱乐</div><div class="hiddenbox"><div class="box1">综艺</div><div class="box1">明星</div></div><div class="angle"></div></body>
</html>