Question

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

我有一个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（）;或scrollRight（）;我似乎不明白我在哪里犯了错误。

我做了一些测试，看看它是否属于函数......

window.onload = function（）{

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上触发。我在互联网上搜索，我一直无法找到问题的解决方案。我似乎无法找出我做错了什么。我在其他网站上使用过外部功能，但从不使用onmouseover，所以我不确定可能是什么问题。

非常感谢任何帮助。

Answer 1

试试这个：

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/

Answer 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";
}

您应该使用＆＃39;事件＆＃39;来访问该元素。宾语。有更好的方法可以做到这一点，你应该研究一下＆＃39; unobstrusive＆＃39; JavaScript的。 here

Answer 3

你的功能与原来的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";
    }

Answer 4

如果可以，请使用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的背景颜色，但这只是一个简单的示例解决方案。

onMouseOver不触发特定功能

4 个答案: