盒子阴影过渡不起作用答案

【问题标题】：Box Shadow Transition Not Working盒子阴影过渡不起作用
【发布时间】：2017-11-01 07:31:14
【问题描述】：

所以，我不明白我做错了什么，但如果我这样编码，它可以在 CSS 中工作。但是，我决定挑战自己，看看我是否可以在 JQuery 中弄清楚，因为我是新手。不幸的是，由于某种原因它不起作用。我研究了很长时间，我不知道为什么它不起作用。

HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="adventure.css"/>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="adventure.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Adventure Corner</title>
</head>
<body>
    <div id="panel-holder">
        <div id="nav-holder"> 
            <div class="nav-button"><a href="#">HOME</a></div>
            <div class="nav-button"><a href="#">NORTH AMERICA</a></div>
            <div class="nav-button"><a href="#">SOUTH AMERICA</a></div>
            <div class="nav-button"><a href="#">ASIA</a></div>
            <div class="nav-button"><a href="#">AUSTRALIA</a></div>
            <div class="nav-button"><a href="#">EUROPE</a></div>
            <div class="nav-button"><a href="#">AFRICA</a></div>
        </div>
    </div>
</body>
</html>

CSS：

#nav-holder {
    margin-top: 200px;
    text-align: right;
    font-size: 1.5em;
}

#nav-holder li {
    list-style: none;
}

#nav-holder a {
    color: floralwhite;
    text-decoration: none;
    display: block;
    padding: 8px 12px;
    background-color: red;
    border-bottom: solid black .5px;
}

.nav-button {
     box-shadow: inset 0 0 0 0 orange;
}

JQuery:

    $(document).ready(function () {
    $("#nav-holder a").each(function(){
        $(this).mouseenter(function(evt) {
            evt.preventDefault();

            $(".nav-button").css({
                transition: "ease-in-out .2s",
                "-webkit-transition":  "ease-in-out .3s",
                boxShadow: "inset 300px 0 0 0 orange",
                "-webkit-backface-visibility": "hidden",
                "-webkit-transform": "scale(1)"
            });
        });

        $("#nav-holder a").mouseout(function () {
            $(".nav-button").css({
                boxShadow: "inset 0 0 0 0 orange"
            });
        });
    });
});

【问题讨论】：

您的代码运行良好。你在控制台有错误吗？或者粘贴你的html和所有js
我编辑它以包含我的其他代码。
哦，我没有任何控制台错误。

标签： jquery transition mouseenter box-shadow

【解决方案1】：

删除nav-holder 中的background-color:red 并将其移至nav-button. 并替换：

$(".nav-button").css({

通过

$(this).closest(".nav-button").css({

试试下面：

$(document).ready(function () {
    $("#nav-holder a").each(function(){
        $(this).mouseenter(function(evt) {
            evt.preventDefault();

            $(this).closest(".nav-button").css({
                transition: "ease-in-out .2s",
                "-webkit-transition":  "ease-in-out .3s",
                boxShadow: "inset 300px 0 0 0 orange",
                "-webkit-backface-visibility": "hidden",
                "-webkit-transform": "scale(1)"
            });
        });

        $("#nav-holder a").mouseout(function () {
            $(".nav-button").css({
                boxShadow: "inset 0 0 0 0 orange"
            });
        });
    });
});

#nav-holder {
    margin-top: 200px;
    text-align: right;
    font-size: 1.5em;
}

#nav-holder li {
    list-style: none;
}

#nav-holder a {
    color: floralwhite;
    text-decoration: none;
    display: block;
    padding: 8px 12px;
    border-bottom: solid black .5px;
}

.nav-button {
     box-shadow: inset 0 0 0 0 orange;
     background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel-holder">
    <div id="nav-holder"> 
        <div class="nav-button"><a href="#">HOME</a></div>
        <div class="nav-button"><a href="#">NORTH AMERICA</a></div>
        <div class="nav-button"><a href="#">SOUTH AMERICA</a></div>
        <div class="nav-button"><a href="#">ASIA</a></div>
        <div class="nav-button"><a href="#">AUSTRALIA</a></div>
        <div class="nav-button"><a href="#">EUROPE</a></div>
        <div class="nav-button"><a href="#">AFRICA</a></div>
    </div>
</div>

【讨论】：

嗯。这似乎已经修复了它，但不幸的是，只要它的动画现在运行，它就会闪烁并出现故障。我以前从来没有遇到过这个问题，并且我之前的代码工作，
??我没有眨眼和故障。
它只在 Chrome 中执行。 ://
Chrome 对我来说很好！我不知道你的问题是什么，因为我没有闪烁和故障
嗯。可能是一个插件或我有它的东西。不管怎样，谢谢你的帮助！