DW5 怎么做当鼠标经过图片图片放大离开变回原形的效果 用css 用DW怎么实现鼠标停留在图片上时,让图片放大,鼠标移走的时候...

\u7528css\u600e\u4e48\u505aDW5\u7684\u5f53\u9f20\u6807\u7ecf\u8fc7\u56fe\u7247\u56fe\u7247\u653e\u5927\u79bb\u5f00\u53d8\u56de\u539f\u5f62\u7684\u6548\u679c\uff1f

1\u3001\u5047\u8bbe\u56fe\u7247\u5916\u5c42DIV\u7684class\u4e3apic\uff0c\u56fe\u7247\u7684\u5927\u5c0f\u662f400*300\uff0chtml\u4ee3\u7801\u53ef\u4ee5\u5199\u6210\u4e0b\u9762\u8fd9\u6837:


2\u3001\u5982\u679c\u5e0c\u671b\u9f20\u6807\u7ecf\u8fc7\u65f6\u56fe\u7247\u7684\u5c3a\u5bf8\u53d8\u6210600*450\uff0c\u90a3\u4e48\u5728css\u91cc\u9762\u53ea\u8981\u8fd9\u6837\u5b9a\u4e49\u5c31\u884c\u4e86:pic img:hover{width:600px;height:450px}
3\u3001\u8fd9\u4e2a\u4ee3\u7801\u5728ie6\u4e0b\u4f1a\u4e0d\u751f\u6548\uff0c\u56e0\u4e3aie6\u4e0d\u652f\u6301\u9664A\u6807\u7b7e\u5916\u7684\u5176\u4ed6\u5143\u7d20\u7684:hover\u4f2a\u7c7b\u3002\u5982\u679c\u8981\u5728ie6\u4e0b\u517c\u5bb9\uff0c\u53ea\u9700\u8981\u628adiv\u6539\u6210a\u6807\u7b7e\uff0c\u4e5f\u5c31\u662f\u5728\u56fe\u7247\u4e0a\u52a0\u4e00\u4e2a\u8d85\u94fe\u63a5\uff0c\u7136\u540e\u7ed9\u5b83\u52a0\u4e0a\u4e00\u4e2aclass\u5373\u53ef\u3002
\u9f20\u6807
\u9f20\u6807\u662f\u8ba1\u7b97\u673a\u7684\u4e00\u79cd\u8f93\u5165\u8bbe\u5907\uff0c\u5206\u6709\u7ebf\u548c\u65e0\u7ebf\u4e24\u79cd\uff0c\u4e5f\u662f\u8ba1\u7b97\u673a\u663e\u793a\u7cfb\u7edf\u7eb5\u6a2a\u5750\u6807\u5b9a\u4f4d\u7684\u6307\u793a\u5668\uff0c\u56e0\u5f62\u4f3c\u8001\u9f20\u800c\u5f97\u540d"\u9f20\u6807"(\u6e2f\u53f0\u4f5c\u6ed1\u9f20)\u3002

- -# \u7ed9\u4f60\u4e2a\u7b80\u5355\u7684
\u5148\u5f15\u7528JQ\u7684\u5e93
\u53eb\u4ec0\u4e48 jquery X-X-X.JS
$(document).ready(function(){$("img").mouseover(function (){$(this).css("width","\u653e\u5927\u540e\u7684\u5bbd\u5ea6")\uff1b$(this).css("width","\u653e\u5927\u540e\u7684\u9ad8\u5ea6")\uff1b }); $("img").mouseout/*\u4f3c\u4e4e\u662f\u8fd9\u4e48\u5199\u7684\u53cd\u6b63\u6709\u4e2aOUT*/(function (){$(this).css("width","\u9f20\u6807\u79fb\u5f00\u540e\u7684\u5bbd\u5ea6")\uff1b$(this).css("width","\u9f20\u6807\u79fb\u5f00\u540e\u7684\u9ad8\u5ea6")\uff1b }); });/*\u624b\u91cc\u6ca1\u5de5\u5177\uff0c\u65e0\u6cd5\u9a8c\u8bc1\u4ee3\u7801\u7684\u51c6\u786e\u6027\uff0c\u4f60\u53ef\u4ee5\u5148\u8bd5\u8bd5*/

假设图片外层DIV的class为pic,图片的大小是400*300,html代码可以写成下面这样:
<div class="pic">
<img src="abc.jpg" width="400" height="300"/>
</div>

如果希望鼠标经过时图片的尺寸变成600*450,那么在css里面只要这样定义就行了:
.pic img:hover{width:600px;height:450px}

这个代码在ie6下会不生效,因为ie6不支持除A标签外的其他元素的:hover伪类。如果要在ie6下兼容,只需要把div改成a标签,也就是在图片上加一个超链接,然后给它加上一个class即可。

代码如下:
<html>
<body>
<style type=text/css">
a.click:hover img { width: 120px; height: 80px; }
</style>
<a class="click" href=""><img width="100px" height="60px" src="图片地址"></a>
</body>
</html>
这里用a的伪劣hover,因为在ie6下,不认识其他标签的hover,如果不用兼容ie6的话,那个hover可以直接给img用。
有什么问题可以追问

用:hover伪类啊。不用css的话可以用js,你没写过css导航条???
因为css的话。img必需是伪类的子节点。先决条件。css不能选择父节点。

扩展阅读:dw鼠标停留图片变大 ... dw鼠标经过文字变大 ... dw中鼠标经过图片放大 ... dw鼠标经过变换图片 ... dw鼠标经过单元格背景变色 ... dw鼠标点击切换图片 ... dw中怎么鼠标经过变色 ... 网页制作鼠标经过图像 ... dw鼠标经过文字显示图片 ...

本站交流只代表网友个人观点,与本站立场无关
欢迎反馈与建议,请联系电邮
2024© 车视网