《HTML鼠标移入特效》

本文链接： https://blog.csdn.net/qq_44894205/article/details/102719766

HTML鼠标移入的各种特效

前几篇博客一直在分享过去的经历，我想或许该分享一些干货了

学习完这些内容去应用到实战会让你更加深刻的记住所学习的内容

鼠标移入改变字体颜色

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <!-- style声明样式，即内联样式 -->
  <style type="text/css">
   /* 声明一个类 */
   .demo
   {
    color: black;
    /* 设置被类选择器选择中的p标签的文本颜色为黑色（black） */
   }
   /* 声明某个类被鼠标移入后改变的效果 */
   .demo:hover
   {
    color: blue;
    /* 设置被类选择器选择中的p标签的文本颜色为蓝色（blue） */
   }
  </style>
 </head>
 <body>
  <!-- 通过class类选择器选择demo类 -->
  <p class="demo">鼠标移动到这！</p>
 </body>
</html>

其中的文本颜色是可以更改的，本节内容主要教授如何使用类选择器，下面还会有更多精彩的内容窝，不懂的小伙伴可以评论喔，当然也可以私信我！

鼠标移入改变背景颜色+文本颜色

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <!-- style声明样式，即内联样式 -->
  <style type="text/css">
   /* 声明一个类 */
   .demo
   {
    color: black;
    /* 设置被类选择器选择中的p标签的文本颜色为黑色（black） */
    background-color: bisque;
    /* 设置被类选择器选择中的p标签的背景颜色 */
   }
   /* 声明某个类被鼠标移入后改变的效果 */
   .demo:hover
   {
    background-color: aquamarine;
    /* 鼠标移入后背景颜色发生改变 */
    color: blue;
    /* 设置被类选择器选择中的p标签的文本颜色为蓝色（blue） */
   }
  </style>
 </head>
 <body>
  <!-- 通过class类选择器选择demo类 -->
  <p class="demo">鼠标移动到这！</p>
 </body>
</html>

可能会有小伙伴发现起到作用的还是:hover这个代码，对的没错，他是一个鼠标移入事件的代码，今天我们会去更加深入的通过实例去学习它

鼠标移入改变背景颜色+文本颜色+高度+宽度

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <!-- style声明样式，即内联样式 -->
  <style type="text/css">
   /* 声明一个类 */
   .demo
   {
    color: black;
    /* 设置被类选择器选择中的p标签的文本颜色为黑色（black） */
    background-color: bisque;
    /* 设置被类选择器选择中的p标签的背景颜色 */
   }
   /* 声明某个类被鼠标移入后改变的效果 */
   .demo:hover
   {
    background-color: aquamarine;
    /* 鼠标移入后背景颜色发生改变 */
    color: blue;
    /* 设置被类选择器选择中的p标签的文本颜色为蓝色（blue） */
    height: 100px;
    /* 高度 */
    width: 100%;
    /* 宽度 */
   }
  </style>
 </head>
 <body>
  <!-- 通过class类选择器选择demo类 -->
  <p class="demo">鼠标移动到这！</p>
 </body>
</html>

这里我们通过鼠标移入增加了改变高宽的效果，因此会发现一个道理，比如你默认文本颜色为白色，你鼠标移入后设置的是黑色因此鼠标移入后设置的属性会覆盖最初的属性

今天由于时间关系就不分享这么多干货了，期待我们在下一篇技术贴里共同学习与讨论，加油！

《HTML鼠标移入特效》

HTML鼠标移入的各种特效

猜你喜欢