正文
javascript鼠标经过,javascript鼠标经过字体变色
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
js如何实现鼠标经过图片的切换
您好，这样的：
1、html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titleJquery deal images/title
script src="./js/jquery.js" type="text/javascript"/script
script type="text/javascript"
!--
//这里是JS代码 ，下面豆芽会写上
//--
/script
/head
body
img src="./images/img02.png" /
/body
/html
2、
$(document).ready(function(){
var newImage = new Image(); //预载入图片
var oldImage = $('img').attr('src');
newImage.src = './images/img03.jpg';
$('img').hover(function(){ //鼠标滑过图片切换
$('img').attr('src',newImage.src);
},
function(){
$('img').attr('src',oldImage);
});
});
这里大家迷惑的是为什么要预载入图片呢？因为在网站上不像我们本地调试，图片下载这么快。如果是在互联网上，当鼠标滑过将要切换的图片时，替换的图片还要临时下载，加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。
相关问答
Q1: 网页制作javascript鼠标经过文字变色问题
style type="text/css"
body,td,th {
font-size: 18px;
color: #999;
font-weight: bold;
}
上面已经设置了td,th文字颜色属性，
td width="62"div align="center"a href=page1.html style="color='#999';cursor:hand" onmouseover="javascript:this.style.color='red'"
onmouseout="javascript:this.style.color='#999'"游戏介绍/a/div/td
这里又设置了颜色属性，不过行内样式优先，可以改成style="color=blue;............"，这时即：
style type="text/css"
body,td,th {
font-size: 18px;
color: #999;
font-weight: bold;
}
td width="62"div align="center"a href=page1.html style="color='blue';cursor:hand" onmouseover="javascript:this.style.color='red'"
onmouseout="javascript:this.style.color='#999'"游戏介绍/a/div/td
这时颜色body,td,thcolor属性已经不起作用了也可以下面这样，去掉行内style="color:#999",行内的color属性去掉 前边color设置成你要的其实颜色。
style type="text/css"
body,td,th {
font-size: 18px;
color: blue;
font-weight: bold;
}
td width="62"div align="center"a href=page1.html style="cursor:hand" onmouseover="javascript:this.style.color='red'"
onmouseout="javascript:this.style.color='#999'"游戏介绍/a/div/td
有点乱，希望有帮助！
Q2: js自定义鼠标经过事件函数
window.onload = function(){
var menu = document.getElementById('menu');
var img = menu.getElementsByTagName('img');
menu.onmouseout = function(){
for(var i=0;iimg.length;i++){
var src = img[i].src;
if(src.indexOf('_over')!=-1) {
var index = src.lastIndexOf('.');
img[i].src = src.substr(0,index-5)+src.substr(index,src.length);
}
}
};
menu.onmouseover = function(){
for(var i=0;iimg.length;i++){
var src = img[i].src;
if(src.indexOf('_over')!=-1) continue;
var index = src.lastIndexOf('.');
img[i].src = src.substr(0,index)+'_over'+src.substr(index,src.length);
}
}
};
不谢，请叫我红领巾
Q3: 关于javascript的鼠标经过的问题 onmouseover
原生自带的onmouseover是存在鼠标从子级移到父级上时，也代表over。所以就会出现多次触发onmouseover事件，但原生还提供了另外一种鼠标移入事件。是onmouseenter。使用这个事件，就把onmouseover的问题完美的解决掉了。
下面是代码，仅供参考：
body
div style="width:100px; height:100px; background:#ccc;"
h2 style="width:50px; height:100px; background:red;"/h2
/div
/body
script
var oDiv = document.getElementsByTagName('div')[0];
var oH = document.getElementsByTagName('h2')[0];
oDiv.onmouseenter = function(){
alert(1);
};
/script
Q4: js如何直接触发鼠标经过事件
这是什么意思？不能等于 事件只能一次响应一种；你可以点击之后，如果鼠标又经过了 执行经过后的程序 没有等同这种说法
