使用JQuery懸停事件改變CSS時mouseIn或鼠標移開

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"> 
 
\t \t <div class="feature-icon1"><i class="fa fa-balance-scale"></i></div> 
 
\t \t <div class="feature-content">Every one is equal before Law</div> 
 
</div>

這是我的代碼在這裏使用懸停功能的IAM，但它不工作的罰款。當我mouseout也box-shadow保持不變可能是什麼問題。謝謝

Answer 1

這是一個工作演示。

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

你有問題是你沒有處理mouse-out事件。

希望這會有所幫助！