onmouseover 和使用“this”的内联函数目的

Question

我有以下代码：

<div id="some_div" style="border: solid 1px red; width:50px; height: 50px;" 
onmouseover="(function(){$(this).css('background','green');})();"></div>

该函数运行得很好，但似乎无法找到“this”。 我怎样才能让它知道自我引用？

（是的，我的代码中引用了jquery）

Answer 1

我不知道你是否想在那里使用匿名函数。我认为

<div id="some_div" style="border: solid 1px red; width:50px; height: 50px;" 
onmouseover="$(this).css('background','green');"></div>

会起作用。

Answer 2

如果您确实需要将其包装在匿名函数中，则可以这样做。

onmouseover="(function(that){$(that).css('background','green');})(this);"

Answer 3

这将会变得混乱，因为你正在执行该函数。让我们稍微分解一下。

如果这不是内联的，它会看起来像这样：

onmouseover = (function(){
    $(this).css('background','green');
})();

注意到末尾的 () 了吗？这意味着您正在将函数分配给 onmouseover 之前执行代码。

试试这个：

Answer 4

看来你正在使用 jQuery，为什么不完全这样做呢

$('#tag').hover(function() { $(this).css('background', 'green'); });

<div id="tag"> ... </div>

Answer 5

@matt，您可以对 css 执行相同的操作，只需在类上使用 :hover 即可。

.SomeDiv
{
    border: solid 1px red; 
    width:50px; 
    height: 50px;
    /*remove the below line if you like to keep the hover color*/
    background-color:white;
}

.SomeDiv:hover
{
    background-color:green;
}

和

<div id="some_div" class="SomeDiv"></div>