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

移除background-color:red中的nav-holder并将其移至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>

盒子阴影过渡不起作用

1 个答案: