Question

当用户将鼠标悬停并单击时，我正在尝试更改div的背景图像。我坚持将图像限制为仅更改为用户悬停/单击的元素。在此示例中，当悬停/单击一个div时，所有按钮都将更改。这是我正在尝试复制已经在jQuery中工作的东西。我猜它可以使用“这个”，但到目前为止我尝试过的所有方法都会导致错误。

任何人告诉我为什么在Firefox中页面加载时警报发生而不是IE或Chrome

的奖励积分

的JavaScript

var buttons = document.getElementsByTagName('div'); 
var i;

function iconDown(e) {
    for (i=0; i<buttons.length; i++) {
        buttons[i].style.backgroundPosition = '0px -61px';
    }
}

function iconUp(e) {
    for (i=0; i<buttons.length; i++) {
        buttons[i].style.backgroundPosition = '0px -122px';
    }
}

function iconOver(e) {
    for (i=0; i<buttons.length; i++) {
        buttons[i].style.backgroundPosition = '0px -122px';
    }
}

function iconOut(e) {
    for (i=0; i<buttons.length; i++) {
        buttons[i].style.backgroundPosition = '0px 0px';
    }   
}

function processAction() {
        alert("Working!");

}

function Init () {
    for (i=0; i<buttons.length; i++) {

            if (document.addEventListener) {  // all browsers except IE before version 9

                buttons[i].addEventListener ("mousedown", iconDown, false);
                buttons[i].addEventListener ("mouseup", iconUp, false);
                buttons[i].addEventListener ("mouseover", iconOver, false);
                buttons[i].addEventListener ("mouseout", iconOut, false);
                buttons[i].addEventListener("click", processAction, false);

        }
        else {   // IE before version 9
                buttons[i].attachEvent ("onmousedown", iconDown);
                buttons[i].attachEvent ("onmouseup", iconUp);
                buttons[i].attachEvent ("onmouseover", iconOver);
                buttons[i].attachEvent ("onmouseout", iconOut);
                buttons[i].attachEvent("onclick", processAction);
            }
        }
   } 

Init();

CSS

        .btn {width:100px; height:61px; float:left;}
        #BackImg {background: url('images/Back.gif') no-repeat 0px 0px;}
        #NextImg {background: url('images/Next.gif') no-repeat 0px 0px;}

HTML

        <DIV class="btn" ID="BackImg"></DIV>
        <DIV class="btn" ID="NextImg"></DIV>

Answer 1

你不需要任何javascript。只需使用css。

.specialClassyClass{
    /*default background position*/
}
.specialClassyClass:hover{
    /*hover state background position*/
}
.specialClassyClass:active{
    /*mouse down background position*/
}

点击内容：

var whatever = function(el, ev, handler){
    el.attachEvent?
        el.attachEvent(ev, handler):
    el.addEventListener(ev, handler, false);
}

whatever(button[i], 'click', processAction);

Answer 2

您可以使用：

function processAction(e) {
        var active = document.querySelector('.active'); // get currently active button
        if(active != undefined)      
             active.className = "btn"; // remove active class

        e.target.className = 'btn active' // add active class to clicked element
}

然后你的css就像：

 .btn {width:100px; height:61px; float:left;background: orange;}
  .active {background: red;}

http://jsfiddle.net/NXVv7/

如何使用JavaScript将鼠标事件限制为当前元素

2 个答案: