JQuery mouseover task

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! The html has a list of divs that php generates to have IDs intCell_1, intCell_2, etc. Any ideas?

0


a source to share


2 answers


Your literal CSS object 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 example: http://jsbin.com/iyoba (edited via http://jsbin.com/iyoba/edit )

0


a source


UPDATED:

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



Example:

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

      

+1


a source







All Articles