[英]Change color by mouse over
I'ld like to change the " imgTag.style.border='5px solid #FF00FF'
" to black when the mouse is over an image.当鼠标悬停在图像上时,我想将“ imgTag.style.border='5px solid #FF00FF'
”更改为黑色。 This is my JavaScript:这是我的 JavaScript:
javascript:for(i=0;i<document.getElementsByTagName('img').length;i++)
{
var imgTag=document.getElementsByTagName('img')[i];
imgTag.style.border='5px solid #FF00FF';
imgTag.title='';
imgTag.onclick=function()
{
return !window.open('http://www.example.com/#/'+this.src);
}
}
void(0)
How can it be done?怎么做到呢? Thanks Frank谢谢弗兰克
You need to bind handlers to the mouseover
and mouseout
events to change the image's border color:您需要将处理程序绑定到mouseover
和mouseout
事件以更改图像的边框颜色:
var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; ++i) {
imgs[i].onmouseover = function() {
this.style.borderColor = '#000';
};
imgs[i].onmouseout = function() {
this.style.borderColor = '#f0f';
};
}
For example: http://jsfiddle.net/bNk4Y/例如: http://jsfiddle.net/bNk4Y/
Not sure what's wrong with the code you have, but if i understand your question correctly, this should do it: HTML:不确定您的代码有什么问题,但如果我正确理解您的问题,应该这样做:HTML:
<img src="" >
<img src="">
...
JS: JS:
var imgs = document.getElementsByTagName("img");
for(i=0;i<imgs.length;i++)
{
imgs[i].onmouseover = function() {this.style.border="1px red solid";};
}
Note, however, that this can easily be achieved with CSS as well, which is a better practice - in case users have JS disabled, etc但是请注意,这也可以通过 CSS 轻松实现,这是一种更好的做法 - 以防用户禁用 JS 等
img:hover {
border: 1px red solid;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.