1
私は間違っていることを理解していませんが、それをコード化すれば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 –
を貼り付けて、他のコードも含めて編集しました。 –
ああ、私はコンソールエラーがありません。 –