Блог

Главная - Вопросы по программированию - Изменение цвета при наведении курсора мыши

Изменение цвета при наведении курсора мыши

#javascript

#javascript

Вопрос:

Я хотел бы изменить « imgTag.style.border='5px solid #FF00FF' » на черный при наведении курсора мыши на изображение. Это мой 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)

Как это можно сделать?
Спасибо
Фрэнк

Комментарии:

1. CSS, предложенный Томасом, является самым чистым решением. Кстати, если вы хотите использовать изображение для навигации, вы должны обернуть его в <a> элемент (и выполнять навигацию из <a> ), чтобы он был доступен пользователям клавиатуры.

Ответ №1:

Вам необходимо привязать обработчики к событиям 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';
    };
}

Например: http://jsfiddle.net/bNk4Y /

Ответ №2:

Не уверен, что не так с вашим кодом, но, если я правильно понимаю ваш вопрос, это должно сработать: HTML: 

 <img src="" >
<img src="">
...

JS: 

 var imgs = document.getElementsByTagName("img");
for(i=0;i<imgs.length;i  )
{
    imgs[i].onmouseover = function() {this.style.border="1px red solid";};   
}

Однако обратите внимание, что этого можно легко достичь и с помощью CSS, что является лучшей практикой — на случай, если у пользователей отключен JS и т. Д

 img:hover {
border: 1px red solid;
}