css控制鼠标经过图片放大和变图

最新推荐文章于 2023-11-04 00:05:06 发布

原创最新推荐文章于 2023-11-04 00:05:06 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML

css 同时被 2 个专栏收录

10 篇文章

订阅专栏

js(用户体验设计)

10 篇文章

订阅专栏

本文通过一个具体的HTML页面案例展示了如何使用CSS进行元素的绝对定位，并实现鼠标悬停时的图像变化效果。通过对页面结构的解析，可以了解到不同div元素的位置设置以及如何通过onmouseover和onmouseout事件来触发图像源的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 

<style > 

#over { 
position:absolute; 
left:300px; 
top:200px; 
} 

#over a:hover  img{ 
width: 110px; height: 110px; 
position:absolute; left:-5px; top:-5px;z-index:100; 
} 
#over2 { 
position:absolute; 
left:600px; 
top:200px; 
} 

</style> 
</HEAD> 

<BODY> 
<div><IMG SRC="six.jpg" WIDTH="950" HEIGHT="672" BORDER=0 ALT=""></div> 
<div id="over"><a href="#"><IMG SRC="22.png" WIDTH="100" HEIGHT="100" BORDER=0 ALT=""></a></div> 
<div id="over2"><a href="#"><IMG SRC="33.png" WIDTH="100" HEIGHT="100" BORDER=0 ALT="" onmouseover="this.src='33_2.png'" onmouseout="this.src='33.png'" ></a></div> 
</BODY> 
</HTML>