導航:首頁 > 圖片大全 > 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如何使圖片變大相關的資料

熱點內容

心痛女孩子的動態圖片發布：2025-10-20 08:52:06 瀏覽：329

女孩白色內內圖片發布：2025-10-20 08:51:57 瀏覽：320

入冬早上好文字圖片發布：2025-10-20 08:36:43 瀏覽：678

帥氣男生換裝圖片發布：2025-10-20 08:36:40 瀏覽：298

短發面條卷發型圖片發布：2025-10-20 08:36:30 瀏覽：1075

可愛小孩子圖片賣萌發布：2025-10-20 08:11:59 瀏覽：705

花的圖畫手繪簡單圖片發布：2025-10-20 08:11:10 瀏覽：868

動漫公主服裝圖片大全圖片大全發布：2025-10-20 08:06:45 瀏覽：270

動漫繪畫作品圖片發布：2025-10-20 08:00:34 瀏覽：188

小女孩幾幾的現狀圖片發布：2025-10-20 07:57:04 瀏覽：437

櫻花圖片動漫圖發布：2025-10-20 07:36:11 瀏覽：792

成熟潮男搭配衣服圖片發布：2025-10-20 06:59:38 瀏覽：238

動漫人物圖片大全黑白發布：2025-10-20 06:50:09 瀏覽：1156

最多動漫圖片發布：2025-10-20 06:43:12 瀏覽：907

小鳥衣服圖片大全可愛發布：2025-10-20 06:42:30 瀏覽：577

手擋太陽的圖片女生發布：2025-10-20 06:36:07 瀏覽：640

男女生圖片背影圖片發布：2025-10-20 06:22:21 瀏覽：1195

想太多心會累文字圖片發布：2025-10-20 06:13:47 瀏覽：501

簡單動漫圖片教程視頻發布：2025-10-20 05:56:17 瀏覽：686

女孩發育圖片視頻發布：2025-10-20 05:54:07 瀏覽：685