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

熱點內容

word文檔做成圖片發布：2025-07-03 02:03:52 瀏覽：657

背景圖片幻燈片可愛發布：2025-07-03 02:01:27 瀏覽：427

卡通小兔圖片大全發布：2025-07-03 02:00:07 瀏覽：534

星游記動漫圖片發布：2025-07-03 01:56:46 瀏覽：196

電腦桌面老是自己換圖片怎麼回事發布：2025-07-03 01:54:44 瀏覽：118

老年頭發短發發型圖片發布：2025-07-03 01:16:18 瀏覽：810

word圖片無法另存為什麼發布：2025-07-03 00:56:54 瀏覽：304

慶元通寶的圖片及價格發布：2025-07-03 00:46:43 瀏覽：127

努力臨帖高清圖片發布：2025-07-03 00:42:00 瀏覽：225

早安美好圖片大全發布：2025-07-03 00:36:05 瀏覽：588

情侶圖片可愛卡通小清新發布：2025-07-03 00:27:15 瀏覽：291

南方女生版圖片發布：2025-07-03 00:19:20 瀏覽：434

保佑考試通過圖片可愛發布：2025-07-03 00:02:24 瀏覽：714

美女測試平板的圖片發布：2025-07-03 00:02:20 瀏覽：647

露文字圖片發布：2025-07-03 00:00:43 瀏覽：529

圖片文字復印到word圖片不見了發布：2025-07-03 00:00:43 瀏覽：228

兒童數學連線找朋友圖片簡單發布：2025-07-02 23:41:43 瀏覽：985

手抄報圖片英語簡單發布：2025-07-02 23:40:40 瀏覽：229

word整頁插入6張圖片調整對齊發布：2025-07-02 23:39:07 瀏覽：12

如何去除圖片的邊框發布：2025-07-02 23:33:11 瀏覽：569