Thứ Hai, 1 tháng 6, 2020

Jquery Css Hover html


HTML:
<input name="time_chay" value="360" class="auto-width form-control time-chay-thecao time-chay-thecao6" data-id="6" onkeypress="return isNumberKey(event)" style="box-shadow: none; border: none; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;">

JAVASCRIPT:
$(".time-chay-thecao").mouseover(function() {
    var id   = $(this).attr("data-id");
    $(".time-chay-thecao"+id).css({
        "box-shadow": "inset 0 1px 1px rgba(0,0,0,075)",
        "border": "1px solid #ccc",
        "-webkit-box-shadow": "inset 0 1px 1px rgba(0,0,0,.075)",
        "box-shadow": "inset 0 1px 1px rgba(0,0,0,.075)",
        "-webkit-transition": "border-color ease-in-out .15s,box-shadow ease-in-out .15s",
        "transition": "border-color ease-in-out .15s,box-shadow ease-in-out .15s",
    });
}).mouseout(function() {
    var id   = $(this).attr("data-id");
    $(".time-chay-thecao"+id).css({"border": "none","box-shadow": "none"});
});

CSS:
.time-chay-thecao {
    border: none;
    box-shadow: none;

}

Không có nhận xét nào:

Đăng nhận xét