Box Schatten Übergang funktioniert nicht

Also, ich verstehe nicht, was ich falsch mache, aber es funktioniert in CSS, wenn ich es so codiere. Ich entschied mich jedoch, mich selbst herauszufordern, um zu sehen, ob ich es in JQuery herausfinden kann, da ich neu bin. Leider funktioniert es aus irgendeinem Grund nicht. Ich habe lange recherchiert und weiß nicht, warum es nicht funktioniert.Box Schatten Übergang funktioniert nicht

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" 
      }); 
     }); 
    }); 
});

Quelle

2017-11-01 Brandon Caylor

Ihr Code funktioniert gut. Hast du einen Fehler in der Konsole? oder fügen Sie Ihre HTML und alle js hinzu –

Ich redigierte es, um meinen anderen Code auch einzuschließen. –

Oh, und ich habe keine Konsolenfehler. –

Entfernen Sie Ihre background-color:red in nav-holder und bewegen diese in nav-button. und ersetzen:

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

von

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

unten Versuchen:

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

Quelle

2017-11-01 09:30:35

Hm. Dies scheint es behoben zu haben, aber leider blinkt und stört es immer, wenn die Animation gerade läuft. Ich habe dieses Problem noch nie zuvor kennengelernt, und der Code, den ich davor hatte, hat funktioniert: –

?? Ich habe kein Blinzeln und Stolpern. –

Es tut es nur in Chrome. :/ –

Box Schatten Übergang funktioniert nicht

Antwort

Verwandte Themen