鼠标移动/经过图片或div,图片变化。强大的onmouseover

原创 2013年12月06日 09:05:01

如果是移动到图片上图片变化,可以直接写:

<img src="/images/s1.png" onmouseover="this.src='/images/s1-on.png'" onmouseout="this.src='/images/s1.png'"/>


如果移动到某个元素上,元素的样式改变,可以写作:

<div class="list_out" onmouseover="this.className='list_over'" onmouseout="this.className='list_out'">

同理可以改变该元素的任意属性


如果鼠标在某个div内移动时,不管移动到哪儿,只要在本区块内,就改变某个图片,可以写作:

<div onmouseover="mouseOver()" onmouseout="mouseOut()">
<img src="/i/eg_mouse2.jpg" id="b1" />
</div>

头部引用javascript代码:

<script type="text/javascript">
function mouseOver()
{
document.getElementById('b1').src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById('b1').src ="/i/eg_mouse2.jpg"
}
</script>

/*         本部分javascript代码来源于w3c官网的onmouseover事件介绍          */

有了以上的几种方案,可以解决大部分的需求。

相关文章推荐

DIV CSS鼠标经过悬停在图片上时图片上方显示文字

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现。CSS实现鼠标悬停放图片上方时显示美化内容。 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背...

div内图片随鼠标移动简单

  • 2015年06月23日 19:32
  • 24KB
  • 下载

鼠标移动显示 div 图片 文字效果

鼠标移动变换栏目内容特效 .showbox{ clear:both; width:500px;/*此处控制显示区域的高度*/ border:1px solid #ff0000;/*此处...

js div随鼠标移动,css图片放大镜效果

js div随鼠标移动,css图片放大镜效果css代码: index.css文件/* CSS样式 */ body{ margin:30px;} div { cursor: pointer...

鼠标经过图片放大

  • 2017年07月30日 11:39
  • 1KB
  • 下载

利用JS实现基本的图片轮播功能,包括鼠标的经过事件

js实现简单的轮播效果包括鼠标经过事件,只做参考不能作为代码直接使用

鼠标经过放大图片

  • 2013年02月17日 11:51
  • 415KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标移动/经过图片或div,图片变化。强大的onmouseover
举报原因:
原因补充:

(最多只允许输入30个字)