【hover隐藏·HTML元素】

CSS实现hover状态隐藏

CSS 中的 hover 状态可以在用户鼠标悬停在元素上时触发特定样式。

一、定义一个 CSS 类

我们需要定义一个 CSS 类，让它能够隐藏元素。可以通过设置元素的 display 属性为 none 来实现。

.hide{
   
display: none;
}

二、将这个类应用于需要隐藏的元素的初始状态

<div class="hide">
<p>这是需要隐藏的元素</p>
</div>

这样，在元素没有被悬停时就会隐藏。

三、将:hover 选择器与上面定义的 .hide 类组合使用

用 CSS 中的 hover 状态去控制这个元素的显示与隐藏

<div class="hoverable">
<p class="hide">这是需要隐藏的元素</p>
</div>
.hoverable:hover .hide{
   
display: block;
}

参考：https://www.yzktw.com.cn/post/1553789.html

v-show

根据真假切换元素的显示状态

• 原理是修改元素的display，实现显示隐藏，指令后面的内容，最终都会解析为布尔值
• 值为true元素显示，值为false元素隐藏（操作地址，频繁切换时使用，切换小消耗小）

v-if

根据真假切换元素的显示状态（操作dom元素）（不频繁切换时使用）

align

• 设置文字在元素内显示的位置
• align=“center”/left/right

无序列表/有序列表/自定义列表

有序列表

<ol  type="I" start="4"