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 –
나는 내 다른 코드를 포함하도록 편집했습니다. –
아, 콘솔 오류가 없습니다. –