5

我有一个非常令人困惑的问题，我想知道是否有人可以对此有所了解。

我有一个 DIV 元素...

<div onmouseout="scrollRight();" onmouseover="scrollLeft();" id="rightScrollRegion" class="ScrollRegion"></div>

还有一个外部脚本文件...

function scrollLeft(){
        document.getElementById('rightScrollRegion').style.background = "#0000ff";
    }

    function scrollRight(){
        document.getElementById('rightScrollRegion').style.background = "#ff0000";
    }

问题是 onmouseover 似乎没有调用函数 scrollLeft(); 或滚动右（）；我似乎不明白我在哪里犯了错误。

我做了一些测试，看看它是否在函数中......

window.onload = 函数（）{

scrollLeft();

}

在外部文件中工作并在页面加载时更改 DIV 的背景......所以功能工作。

我还尝试更改 onmouseover 中所谓的内容...

<div onmouseover="alert('Hello');" id="rightScrollRegion" class="ScrollRegion"></div>

打印一个警报窗口就好了。

所以我想也许我无法使用 onmouseover 更改背景所以我尝试了......

<div onmouseover="this.style.background = '#0000ff'" id="rightScrollRegion" class="ScrollRegion"></div>

这改变了预期的背景。

但由于某种原因，我无法让我的函数在 DIV 上触发。我在整个互联网上进行了搜索，但我一直无法找到该问题的解决方案。我似乎无法找出我做错了什么。我在其他网站上使用过外部功能，但从来没有使用过鼠标悬停，所以我不确定可能是什么问题。

任何帮助将不胜感激。

4

4 回答 4

6

尝试这个：

element = document.getElementById('rightScrollRegion');
element.addEventListener("mouseover",function(){
    this.style.background = "#0000ff";
});
element.addEventListener("mouseout",function(){
    this.style.background = "#ff0000";
});

避免使用内联事件处理程序。使用该addEventListener方法将事件侦听器附加到元素。

你可以在这里试试这个：http: //jsfiddle.net/gkvq8/

于 2012-11-17T18:36:25.660 回答
2

你可以试试这个：

这是 HTML 元素：

<button onmouseover="mousein(event)" onmouseout="mouseout(event)">hello</button>

和功能：

function mousein(event){
    event.target.style.background="#FF0000";
}

function mouseout(event){
    event.target.style.background="#FFFFFF";
}

您应该使用“事件”对象访问该元素。有更好的方法可以做到这一点，您应该研究“不引人注目的”javascript。这里

于 2012-11-17T18:53:44.423 回答
2

您的函数与原始函数 javascript 相对，因此请更改函数名称，如下所示：

<div language="javascript" onmouseout="funcTwo()" onmouseover="funcOne()" id="rightScrollRegion" class="ScrollRegion"></div>

和这个

function funcOne(){
        document.getElementById('rightScrollRegion').style.backgroundColor = "#0000ff";
    }
    function funcTwo(){
        document.getElementById('rightScrollRegion').style.backgroundColor = "#ff0000";
    }
于 2012-11-17T18:32:03.170 回答
1

如果可以，请使用jQuery。它会让你的生活更轻松，代码也更灵活。

要使用 jQuery 库，只需将其包含在您的 HMTL 中：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

这样的事情会做：

$('div').mouseover(function() {
    $('div#rightScrollRegion').attr("style","background-color:#0000ff;");
});

$('div').mouseout(function() {
    $('div#rightScrollRegion').attr("style","background-color:#ff0000;");
});

理想情况下，您将使用addClass和removeClass更改 div 的背景颜色，但这只是一个简单的示例解决方案。

于 2012-11-17T18:32:47.830 回答