Question

I have a page containing several divs with the same class name for CSS reasons. I want to change their border color of each of which I point at them. I did this using the onmouseover event like it does below. but there seems to be problems with the code. I wonder if there is a way to get the id of the div and apply the color to it only.

        $('.link')
            .mouseover(function(evt) {
            evt.preventDefault(); 
            $(document.querySelector(this).id).css('border-color', '#FFF');
            })
            .mouseout(function() {
            $(document.querySelector(this).id).css('border-color', "#CCC");
        });

link is the class name and contains several child divs

Answer 1

$(this) will work exactly how you want..You don’t need to get the id and then apply on that selector..

$(this).css('border-color', '#FFF');