大家好,欢迎来到IT知识分享网。
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