:hover 让页面更好看✨

你的人类朋友
3,359 阅读4分钟

前言

最近在美化一些自定义的组件的时候，发现仅仅一个:hover就可以让自己的页面生动很多，今天就来分享一下。🤟

具体使用

比如我封装了一个简单的组件：

<template>
  <div class="wrap">
  
    <div class="header">
      <slot name="header"></slot>
    </div>
    
    <div class="main">
      <slot name="main"></slot>
    </div>
    
    <div class="footer">
      <slot name="footer"></slot>
    </div>
    
  </div>
</template>

当你想在鼠标悬停（hover）在一个div(也就是)上时添加一些美化效果，你可以使用CSS的:hover伪类选择器。以下是一些常见的美化效果的推荐：

  1. 改变背景色：

    .wrap:hover {
    background-color: #f0f0f0; /* 灰色背景，或者任何你喜欢的颜色 */
}

  2. 改变边框：

    .wrap:hover {
    border: 1px solid #007bff; /* 蓝色边框，增加边框宽度或改变颜色 */
}

  3. 改变阴影：

    .wrap:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}

  4. 改变透明度：

    .wrap:hover {
    opacity: 0.8; /* 降低透明度 */
}

  5. 改变字体样式：

    .wrap:hover {
    color: #ff0000; /* 改变文本颜色 */
    font-weight: bold; /* 字体加粗 */
}

  6. 改变尺寸：

    .wrap:hover {
    transform: scale(1.1); /* 放大10% */
    transition: transform 0.3s ease; /* 添加过渡效果，使变化更平滑 */
}

  7. 旋转效果：

    .wrap:hover {
    transform: rotate(10deg); /* 旋转10度 */
    transition: transform 0.3s ease; /* 添加过渡效果 */
}

  8. 改变形状（例如，使用border-radius）：

    .wrap {
    border-radius: 0; /* 初始无圆角 */
}
.wrap:hover {
    border-radius: 10px; /* 鼠标悬停时添加圆角 */
    transition: border-radius 0.3s ease; /* 添加过渡效果 */
}

  9. 渐变背景：

    .wrap {
    background-color: #fff; /* 初始背景色 */
}
.wrap:hover {
    background: linear-gradient(to right, #ff0000, #00ff00); /* 渐变背景色 */
}

最后

🤟这个时候，你再积累一下常用的伪类，不好意思，你写的页面从此不再单调。😏😏 下面就是一些伪类，其实只要记住一些常用的就可以，比如hover和active!!


1. `:active`：选择并设置用户激活的元素样式。例如，当用户点击一个按钮并还没有释放鼠标按钮时，按钮的样式。

2. `:link`：选择并设置未被访问的链接样式。

3. `:visited`：选择并设置已被访问的链接样式。

4. `:hover`：选择并设置用户鼠标指针浮动在其上的元素样式。

5. `:focus`：选择并设置获得焦点的元素样式。例如，用户点击输入框（input）或选择复选框（checkbox）后，这些元素会获得焦点。

6. `:first-child`：选择其父元素的第一个子元素。

7. `:last-child`：选择其父元素的最后一个子元素。

8. `:nth-child(n)`：选择其父元素的第n个子元素。

9. `:nth-last-child(n)`：选择其父元素的倒数第n个子元素。

10. `:only-child`：选择没有兄弟元素的元素，也就是说，其父元素只有一个子元素。

11. `:only-of-type`：选择其父元素中唯一类型的元素。

12. `:first-of-type`：选择其父元素中第一个指定类型的子元素。

13. `:last-of-type`：选择其父元素中最后一个指定类型的子元素。

14. `:nth-of-type(n)`：选择其父元素中第n个指定类型的子元素。

15. `:nth-last-of-type(n)`：选择其父元素中倒数第n个指定类型的子元素。

16. `:empty`：选择没有子节点的元素（包括文本节点）。

17. `:enabled`：选择表单中的启用元素（例如，未被禁用的`<input>`）。

18. `:disabled`：选择表单中的禁用元素。

19. `:checked`：选择已选中的单选按钮（`<input type="radio">`）或复选框（`<input type="checkbox">`），以及`<option>`元素在`<select>`元素中被选中。

20. `:root`：选择文档的根元素（通常是`<html>`）。

21. `:lang(language)`：选择具有指定语言的元素。

22. `:not(selector)`：选择不匹配指定选择器的元素。

23. `:required`：选择设置了`required`属性的表单元素。

24. `:optional`：选择没有设置`required`属性的表单元素。

25. `:valid`：选择输入值有效的表单元素。

26. `:invalid`：选择输入值无效的表单元素。

27. `:in-range`：选择具有指定范围内的值的`<input type="range">`元素。

28. `:out-of-range`：选择具有指定范围外的值的`<input type="range">`元素。

29. `:read-only`：选择设置为只读的表单元素。

30. `:read-write`：选择未设置为只读的表单元素。

31. `:placeholder-shown`：选择当前显示占位符文本的`<input>`或`<textarea>`元素。

这些伪类允许开发者基于元素的特定状态或位置来选择并设置样式。
avatar
文章
阅读
粉丝