Jquery hover with .each function

Question

I have a code to apply every li's border-left-color to its background.

But I want to apply background-color when user :hover on li element.

And Is that possible fill background left to right with jquery as in this example? It is easy with CSS but I dont know how to do it with jquery.

Here is another solution about left to right background with box-shadow property.

$(document).ready(function(){
     $('.side-category ul li').each(function(){
     $(this).css("background", $(this).css("border-left-color"));
  })
});

Vivek Doshi · Accepted Answer · 2017-06-14 19:06:11Z

3

Here is the function with hover in and hover out :

$('.side-category ul li').hover(
  function() {
    // on hover
    $(this).css("background", $(this).css("border-left-color"));
    $(this).css("box-shadow", "inset 0 100px 0 0 "+$(this).css("border-left-color"));
  }, function() {
    // on remove hover
    $(this).css("background", "#fff");
    $(this).css("box-shadow", "");
  }
);

answered Jun 14, 2017 at 19:06

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fatihsolhan Over a year ago

Yes, It worked very well :) Thank you for your help!

Collectives™ on Stack Overflow

Jquery hover with .each function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related