Using Jquery hover event to change css when mouseIn or mouseOut

Question

$(document).ready(function(){
  var color = $('.feature-icon1').css('color','#00a6ff');
  $('.box-style1').hover(function(){
     $(this).css({
      'box-shadow' : '0px 13px 40px 0px #00a6ff',
      'background-color': 'color',
      'transform': 'translateY(-2px)'
     });
    });
});

.feature-box {
    padding-top: 30px;
    display: inline-block;
    position: relative;
    text-align: center;
    width: 100%;
    border-radius: 4px;
    margin: 0 9px;
    transition: all .7s ease-out;
    font-family: Arial;
}
.box-style1 {width: 100%;height: auto;}
.box-style2 {width: 100%;height: auto;}
.box-style3 {width: 100%;height: auto;}
.box-style4 {width: 100%;height: auto;}
.feature-icon1 {
    font-size: 40px;
    margin: 0 0 15px;
}

<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="feature-box box-style1">
		<div class="feature-icon1"><i class="fa fa-balance-scale"></i></div>
		<div class="feature-content">Every one is equal before Law</div>
</div>

This is my code here iam using hover function but it's not working fine. when I mouseout also box-shadow remains same what might be the problem. thanks

N. Ivanov · Accepted Answer · 2017-09-13 07:58:36Z

2

Here is a working demo.

$(document).ready(function() {
  var color = $('.feature-icon1').css('color', '#00a6ff');
  $('.box-style1').hover(function() {
      $(this).css({
        'box-shadow': '0px 13px 40px 0px #00a6ff',
        'background-color': 'color',
        'transform': 'translateY(-2px)'
      });
    },
    function() {
      $(this).css({
        'box-shadow': 'none',
        'background-color': 'color',
        'transform': 'translateY(-2px)'
      });
    });
});

.feature-box {
  padding-top: 30px;
  display: inline-block;
  position: relative;
  text-align: center;
  width: 100%;
  border-radius: 4px;
  margin: 0 9px;
  transition: all .7s ease-out;
  font-family: Arial;
}

.box-style1 {
  width: 100%;
  height: auto;
}

.box-style2 {
  width: 100%;
  height: auto;
}

.box-style3 {
  width: 100%;
  height: auto;
}

.box-style4 {
  width: 100%;
  height: auto;
}

.feature-icon1 {
  font-size: 40px;
  margin: 0 0 15px;
}

<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="feature-box box-style1">
  <div class="feature-icon1"><i class="fa fa-balance-scale"></i></div>
  <div class="feature-content">Every one is equal before Law</div>
</div>

The problem you had was that you did not handle the mouse-out event.

Hope this helps!

answered Sep 13, 2017 at 7:58

N. Ivanov

1,8332 gold badges17 silver badges28 bronze badges

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

2 Comments

Mehraj Khan Over a year ago

thanks. actually, I don't want to increase the lines of codes.Instead of a mouse event, any other possibilities are there do you know.

N. Ivanov Over a year ago

@MerajKhan I believe you cannot achieve what you want without writing extra code. The computer doesn't know what you want it to do unless you tell it by writing code.

Collectives™ on Stack Overflow

Using Jquery hover event to change css when mouseIn or mouseOut

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related