鼠标移动/经过图片或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事件介绍          */

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

css3+html+Jquery实现鼠标滑过图片切换效果

css3+html+Jquery实现鼠标滑过图片切换效果 position:relative;/*相对定位:参考物*/ overflow:hidden;/*超出隐藏*/...
  • CSDN___LYY
  • CSDN___LYY
  • 2017年03月26日 18:57
  • 1426

鼠标滑过显示图片大图效果

描述: 当用户将鼠标放到 图片上时,显示图片的大图。 效果图: 说明: 用到了mouseover、mouseout、mousemove三个事件,分别表示鼠标滑过图片、鼠标移除图片、鼠标...
  • QianShouYuZhiBo
  • QianShouYuZhiBo
  • 2014年06月06日 21:46
  • 2722

CSS3-鼠标经过图片旋转、缩放、还原

在线演示 html: css: .box img{ width: 250px; height: 450px; } @-webki...
  • erdouzhang
  • erdouzhang
  • 2017年03月13日 16:35
  • 1466

图片交替显示及鼠标滑过更换图片

图片交替显示及鼠标滑过更换图片 鼠标滑过更换图片: function mouseOver(){ docum...
  • facecrazy
  • facecrazy
  • 2016年06月03日 17:53
  • 1132

鼠标滑过图片抖动晃动效果(css/Shake)

别人网站上看到鼠标经过图片左右抖动晃动的特效,自己也想弄一个,查了查是用到的就是CSS3的特性——Shake Shake使用SASS编写,利用它我们可以实现多种不同样式的抖动效果。这是一个很微小的动画...
  • qq_34827048
  • qq_34827048
  • 2017年07月01日 13:17
  • 1079

div跟随鼠标悬浮显示

div跟随鼠标悬浮坐标显示隐藏。
  • xiaosheng_papa
  • xiaosheng_papa
  • 2015年02月26日 14:11
  • 1914

js鼠标放到图片上放大

function BigImg(x) {             x.style.height = "100%";             x.style.width = "100%";    ...
  • wangqiuchen_Study
  • wangqiuchen_Study
  • 2014年11月12日 14:26
  • 2214

鼠标移动到div上显示子div实现要点

本例实现这样一个效果,当鼠标移动到div元素上时,显示子div,并且鼠标移到子div上子div仍然保持显示。当鼠标移出父子div时子div才又重新隐藏起来。子div显示的时候,重叠在后面其他div上,...
  • dog_in_yellow
  • dog_in_yellow
  • 2017年03月19日 14:51
  • 882

JS实现鼠标移入移出控制图片的切换效果

背景 在看专业英语的时候,学习JS的Timer Event.正好有一个例子,实现的是,图片自动切换,当鼠标点击图片的时候,停止切换。于是想要动手实践一下,并且添加上自己的想法。于是就有了下面的图...
  • u013035538
  • u013035538
  • 2016年03月26日 23:15
  • 5001

html+css鼠标悬浮显示图片

初学html,在这里留下足迹。如有谬误,请多指教。 主要步骤:1、将对应的大图小图存放在同一个li标签中(鼠标悬浮到小图时,方便定位到大图)。 2、内部样式中利用...
  • qingbaicai
  • qingbaicai
  • 2016年08月13日 17:31
  • 9723
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标移动/经过图片或div,图片变化。强大的onmouseover
举报原因:
原因补充:

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