导航:首页 > 图片大全 > html中hover如何使图片变大

html中hover如何使图片变大

发布时间：2024-12-28 22:39:14

A. dreamweaver里一张图片怎么做鼠标经过出现大图

1.新建html文档。

B. 在html5页面中，一个div或者图片，鼠标移动上去的时候变大，移出的时候又变回原样怎么弄，

这里介绍两种物则方式：

一：通过css样式中的 ":hover"实现，代码如下

<!DOCTYPEhtml>
<htmllang="en">
<head>
	<metacharset="UTF-8">
	<title>Document</title>
	<style>
		div{
			background:red;
			width:200px;
			height:200px;
		}
		div:hover{
			background:red;
			width:500px;
			height:500px;
		}
	</style>
</head>
<body>
	<div>变大</div>
</body>
</html>

二：通过javascript方式实现，代码如下

<!DOCTYPEhtml>
<htmllang="en">
<head>
	<metacharset="UTF-8">
	<罩敏棚title>拿隐Document</title>
	<style>
		div{
			background:red;
			width:200px;
			height:200px;
		}
		.divs{
			background:red;
			width:500px;
			height:500px;
		}
	</style>
</head>
<body>
	<div>变大</div>
	<script>
		//首先获取div元素
		vardivs=document.getElementsByTagName('div')[0];
		//鼠标移入，将divs的className样式赋给该标签
		divs.onmouseover=function(){
			this.className="divs";
		}
		//鼠标移出，将空的className样式赋给该标签
		divs.onmouseout=function(){
			this.className="";
		}
	</script>
</body>
</html>

阅读全文

与html中hover如何使图片变大相关的资料

热点内容

野足钓椅价格图片发布：2024-12-29 13:46:36 浏览：822

简单绘画书图片加文字五年级发布：2024-12-29 13:23:23 浏览：959

图片如何转成wps格式发布：2024-12-29 13:08:44 浏览：100

word单独复制图片发布：2024-12-29 12:59:25 浏览：22

羽毛图片手绘男生发布：2024-12-29 12:48:48 浏览：520

被人遗忘的男生图片发布：2024-12-29 12:34:31 浏览：283

货车物流图片大全发布：2024-12-29 12:32:50 浏览：813

动物橡皮泥图片大全发布：2024-12-29 12:32:42 浏览：691

如何从相册里找到图片发布：2024-12-29 12:31:54 浏览：823

李嘉诚穿白衣服图片发布：2024-12-29 12:26:28 浏览：986

office图片文字识别发布：2024-12-29 12:24:51 浏览：151

女孩蜷缩的图片发布：2024-12-29 12:24:46 浏览：265

古代衣服图片女装手绘发布：2024-12-29 12:19:44 浏览：556

伤感男生挥手图片发布：2024-12-29 12:09:48 浏览：876

男生头像酷的图片发布：2024-12-29 11:43:41 浏览：834

相亲文字图片发布：2024-12-29 11:43:38 浏览：956

滴水湖高清图片风景发布：2024-12-29 11:43:32 浏览：137

整合的图片如何转pdf 发布：2024-12-29 11:42:09 浏览：878

雪中动漫背影图片发布：2024-12-29 11:40:45 浏览：413

女生霸气头像背影图片发布：2024-12-29 11:40:42 浏览：80