jquery- Невозможно изменить цвет или css?

Question

Итак, я задал этот вопрос jQuery animate color change и скопировал их синтаксис точно. Я пытаюсь оживить изменение нескольких свойств css при наведении, начиная с border-color.

Первоначально у меня был $(".panel-default", this).css("border-color", "#ddd"); в пределах моей функции, но это было мгновение. Теперь у меня есть:

$(".lab1, .lab2, .lab3").hover(function(){ 

    $(".panel-default", this).animate({"border-color":"green"}, 200); 

}, function() { 

// $(".panel-default", this).css("border-color", "#ddd"); 
// $(".panel-default > .panel-heading", this).css("background-color", "#f5f5f5"); 
// $(".panel-default > .panel-heading", this).css("border-color", "#ddd"); 
// $(".panel-default > .panel-heading", this).css("color", "#565656"); 
    $(".panel-default", this).animate({"border-color":"black"}, 200); 

}); 

Но ничего не происходит. Как изменить анимацию css при наведении?

Answer 1

Вы можете использовать css:hover

[class*=lab-] .panel-default { 
 
    display:block; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 4px solid black; 
 
    border-color: black; 
 
    transition: border-color 200ms ease-in-out; 
 
} 
 
[class*=lab]:hover .panel-default { 
 
    border-color: green; 
 
}

<div class="lab-1"> 
 
    <div class="panel-default"> 
 
    </div> 
 
</div> 
 
<div class="lab-2"> 
 
    <div class="panel-default"> 
 
    </div> 
 
</div> 
 
<div class="lab-3"> 
 
    <div class="panel-default"> 
 
    </div> 
 
</div>