Use of attr to apply edge color to LI

Question

I own a li, which is a square, the CSS is like this

.produtos{
    width: 294px;
    height: 349px;
    /*background-color: #f1f2f2;*/
    border: 3px solid transparent;
    position: relative;
    cursor: pointer;
    transition: all .4s ease-out;
    background-repeat: no-repeat;
}

What happens is I want to change the color of border when the user hovers over. I can’t do that with the hover simple CSS, because this color will be manageable. I already have a reserved word that will apply this color, I just think the ideal would be to use an attr in Jquery, I’m sure?

My HTML is like this:

<li data-cor="codigoSYS" style="background-image: url(fotoSYS&w=294)" class="produtosBorda produtos f-left margin-right-30 margin-top-30"></li>   

code is the hexadecimal value of the color that is received by the manager.

Jquery:

var cor = $('.produtosBorda').attr('data-cor');
$('.produtosBorda').css('border-color', cor);

Answer 1

No, use the method .css() instead of the attr. For example:

$('li').css('border-color', '#00ff00');

If the color comes from a data-attribute in your HTML, no problem. For example:

<li id="sei-la" data-cor="#ff0000">...</li>

var cor = $('#sei-la').attr('data-cor');
$('#sei-la').css('border-color', cor);

---

To react to the input and output of the mouse in each <li>, something like this should work:

$('li.produtos').mouseenter(function() {
    var li = $(this);
    // guarda cor original num atributo
    li.attr('data-cor-original', li.css('border-color'));
    // define nova cor
    li.css('border-color', li.attr('data-cor'));
}).mouseleave(function() {
    var li = $(this);
    // restaura cor original
    li.css('border-color', li.attr('data-cor-original'));
});