Possuo uma li
, que é um quadrado, o CSS está assim
.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;
}
O que acontece, é que quero mudar o cor do border
quando o usuário passar o mouse em cima.
Não posso fazer isso com o hover
simples do CSS, pois essa cor será gerenciável. Já tenho uma palavra reservada que irá aplicar essa cor, só acho que o ideal seria usar um attr em Jquery, estou certo?
Meu HTML está assim:
<li data-cor="codigoSYS" style="background-image: url(fotoSYS&w=294)" class="produtosBorda produtos f-left margin-right-30 margin-top-30"></li>
codigoSYS é o valor hexadecimal da cor que é recebido pelo gerenciador.
Jquery:
var cor = $('.produtosBorda').attr('data-cor');
$('.produtosBorda').css('border-color', cor);