框阴影过渡不起作用

Question

所以，我不明白我做错了什么，但如果我这样编码，它在 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"
            });
        });
    });
});

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

框阴影过渡不起作用

Box Shadow Transition Not Working

jquery

transition

mouseenter

box-shadow