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

Кажется, вы используете jQuery, почему бы не сделать это полностью

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

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

Answer 3

@ 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>

Answer 4

Это будет запутано, потому что вы выполняете функцию. Давайте разберемся с этим немного.

Если бы это не было встроенным, это выглядело бы так:

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

Заметьте () в конце? Это означает, что вы выполняете код до того, как функция будет назначена для onmouseover.

Попробуйте вместо этого:

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

Answer 5

Если вам действительно нужно обернуть это в анонимную функцию, вы можете сделать это.

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