零基础学编程(hover)

zhezhongyun 2025-08-02 22:43 3 浏览

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>

具体解释在其中显示

text-transform 属性

上一篇：基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
下一篇：EXCEL如何将文本日期转换为标准日期格式

零基础学编程(hover)

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?