零基础学编程(hover)

零基础学编程(hover)css中:hover是一个伪类选择器,:hover伪类选择器在鼠标移到元素上时向此元素添加特殊的样式。:hover选择器适用于所有元素。:hov

大家好,欢迎来到IT知识分享网。

零基础学编程(hover)

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>

具体解释在其中显示

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/51738.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信