Ok so I have been following this question jQuery animate color change and have copied their syntax exactly. I'm trying to animate a change in a few css properties on hover, starting with border-color.
Originally I had $(".panel-default", this).css("border-color", "#ddd");
within my function but that was instant. Now I have:
$(".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);
});
But nothing is happening. How can I animate change in css on hover?
You can utilize 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.