jquery mouseover question

Question

I have this code:

$("div[id^='intCell']").mouseover(function() {
    $(this).css({ "border:","1px solid #ff097c"});
}).mouseout(function() {
    $(this).css({"border:","1px solid #000"});
})

But I can't get it to work! In the html there is a list of divs which are generated by php to have ids of intCell_1, intCell_2 etc. Any ideas?

Answer 1

Your CSS object literal syntax is incorrect!

It should be:

$("div[id^='intCell']").mouseover(function() {
        $(this).css({ "border": "1px solid #ff097c"}); // <-- This syntax was wrong
}).mouseout(function() {
        $(this).css({"border": "1px solid #000"}); // <-- This syntax was wrong
})

Working sample: http://jsbin.com/iyoba (Editable via http://jsbin.com/iyoba/edit)

Answer 2

UPDATED:

you can use the command "hover" in place of "mouseover" and mouseout", and use the asterisk in the attribute selector:

example:

$("div[id*='intCell']").hover(function() {
 $(this).css({border:"1px solid #ff097c"});
},
function() {
 $(this).css({border:"1px solid #000000"});
});