onmouseover and inline function using the 'this' object

Question

I have the following bit of code:

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

The function gets run just fine but it doesn't seem to be able to find the 'this'. How can I make it so that it will know to self-reference?

(Yes, jquery is referenced in my code)

Why use an inline function? It makes more sense to separate it out (keep code separate from design). — beatgammit, Jul 16 '11 at 16:20

score 3 · Accepted Answer · answered Jul 16 '11 at 07:38

3

I don't know if you want to be using an anonymous function there. I think

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

will work.

answered Jul 16 '11 at 07:38

Paul

139,544
27
275
264

score 1 · Answer 2 · answered Jul 16 '11 at 07:39

1

If you really need to wrap it up in an anonymous function, you can do this.

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

answered Jul 16 '11 at 07:39

Dogbert

212,659
41
396
397

score 1 · Answer 3 · answered Jul 16 '11 at 07:40

This is going to be messed up because you're executing the function. Let's break this up a little.

If this was not inline, it would look like this:

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

Notice the () at the end? This means you're executing the code before the function gets assigned to onmouseover.

Try this instead:

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

Aristos · Answer 4 · 2011-07-16T08:08:33.700

1

@matt you can do the same with css, just by using the :hover on the class.

.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;
}

and

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

edited Jul 16 '11 at 08:08

answered Jul 16 '11 at 07:47

Aristos

66,005
16
114
150

he probably doesn't want to remove the background on `mouseout`. (Atleast from his code snippet). – Dogbert Jul 16 '11 at 07:59
@Dogbert this is easy, you do not use the background-color on the .SomveDiv, only on hover. – Aristos Jul 16 '11 at 08:07
if I hover in and out using your code, the green will go away. But op's original code will stay green. – Dogbert Jul 16 '11 at 08:09
@Dogbert remove one line as I comment on code, and the green will stay – Aristos Jul 16 '11 at 08:13

score 1 · Answer 5 · answered Jul 16 '11 at 07:55

1

Seems you're using jQuery, why not do it all the way

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

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

answered Jul 16 '11 at 07:55

casraf

21,085
9
56
91

onmouseover and inline function using the 'this' object

5 Answers5