使用Jquery悬停事件在mouseIn或mouseOut时更改css

Question

＆＃13;

＆＃13;

$(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)'
     });
    });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是我的代码，我在这里使用悬停功能，但它没有正常工作。当我鼠标输出时，盒子阴影保持不变可能是什么问题。谢谢

Answer 1

这是一个有效的演示。

＆＃13;

＆＃13;

$(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)'
      });
    });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您遇到的问题是您没有处理mouse-out事件。

希望这有帮助！