Using attr to apply border color in LI

Question

Using attr to apply border color in LI

Navigation

#1 by (4 votes)

1

I have a li , which is a square, so CSS is

.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 that I want to change the color of border when the user hover over it. I can not do this with the% css% simple of CSS, because this color will be manageable. I already have a reserved word that will apply this color, I just think it would be ideal to use an attr in Jquery, am I right?

My HTML looks 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>

CodeSYS 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);

jquery css

asked by anonymous 02.09.2014 / 16:26

1 answer

javascript syntax error StringReplace x Array

score 4 · Accepted Answer

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

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

If the color comes from a data-attribute in your HTML, that's fine. 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 every <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'));
});