网站首页 > 知识剖析正文

零基础学编程(hover) 零基础学编程书籍

nixiaole 2024-12-16 15:19:19 知识剖析 20 ℃

css中:hover是一个伪类选择器，:hover伪类选择器在鼠标移到元素上时向此元素添加特殊的样式。:hover选择器适用于所有元素。

:hover在鼠标移到链接上时添加的特殊样式。

在IE中必须声明“<!DOCTYPE>”才能保证“:hover”选择器能够有效

-------------------------------------------------------------------------------------------------------------------------

代码如下

<!DOCTYPE html>
<html>

<head>
  <title>标题-爆米花</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <script type="text/javascript" src="linkJavaScript.js"></script>
  <meta charset="UTF-8">
  <style type="text/css">
    #ceshi {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 500px;
      background: #031628;
      /* 鼠标的样式 */
      cursor: url('./mycur.cur'), auto
    }

    /* 这个是对span的简单修饰 没什么实质性作用 */
    .myspan {
      border: 1px solid;
      background-color: transparent;
      text-transform: uppercase;
      font-size: 14px;
      padding: 10px 20px;
      font-weight: 300;

    }

    .one {
      width: 250px;
      height: 370px;
      background-image: url(./3.jpeg);
      background-repeat: no-repeat;
      background-size: contain;
    }

    .one:hover {
      width: 600px;
      height: 350px;
      background-image: url(./2.jpg);
      background-repeat: no-repeat;
      background-size: contain;

    }
  </style>
  <script>
    document.write("hover特效!")
  </script>
</head>

<body>
  爆米花的内容<br>
  <div id="ceshi">
    <span class="myspan one">变美</span>
  </div>
</body>

</html>

具体解释在其中显示

上一篇： CSS图像 hover 动画效果 css图片动画
下一篇：用HTML5构建一个流程图绘制工具 html 画流程图

网站首页 > 知识剖析 正文

零基础学编程(hover) 零基础学编程书籍

猜你喜欢

网站首页 > 知识剖析正文