jquery .css("border-color") does not return anything

Question

I wrote the following jquery javascript stuff

$(document).mousemove(function(event) {
    var element = event.target;
    $(element).css("border","black solid 1px");
});

$(document).mouseout(function(event) {
    var element = event.target;
    console.log( "1 = "$(element).css("border-color") )
    $(element).css("border","0px");
    console.log( "2 = " + $(element).css("border-color") )
});

It basicly draws a frame around a hovered element. When running this in chrome the output of console.log( "1 = "$(element).css("border-color") ) is "" i.e. nothing. The same is true for console.log( "2 = "$(element).css("border-color") ). But I'd expect black. I also tried borderColor which does not work either.

Anyway when hovering an element a frame is drawn around this element as I would expect. Why then does the output give nothing in return?

Answer 1

You cannot use shorthand for jquery. You have to be more specific, e.g. "border-top-color"

Let me know if that works.