1
그래서 약간의 메뉴 아이디어에 대한 테스트를하고있었습니다. 아이디어는 단지 화면의 왼쪽 상단 모서리에 작은 점이있는 것입니다. 덮어 씌우면 상자 그림자가 커지므로 클릭하면 확대됩니다 (너비 : 100 %, 높이 : 100 %). 그러면 같은 색상의 숨겨진 div가 표시됩니다. 그러면 메뉴가 닫히고 닫기 버튼 (CHIUDI)을 클릭하면 메뉴가 열립니다. 그러나 화면 모서리에있는 점의 호버 속성은 더 이상 작동하지 않습니다.
CSS 규칙을 수정하기 위해 JavaScript를 사용하고 있기 때문에이 문제가 발생한다고 생각합니다. 메뉴를 닫기 위해 메뉴를 닫을 때는 0을 box-shadow로 설정합니다.
아마도 이것이 문제 일 것입니다. : hover CSS 속성.
순수한 JavaScript를 사용하여 문제를 해결할 수 있습니까? (jQuery 없음). !
다음은 코드입니다 :
JavaScript Dom 후에 CSS hover가 작동하지 않습니다.
<html>
<head>
<title>Design Tests</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:200');
#button {
position: fixed;
width: 50px;
height: 50px;
background-color: blue;
border-radius: 25px;
transition-duration: 500ms;
z-index: 1;
cursor: pointer;
}
#button:hover {
box-shadow: 0px 0px 0px 30px rgba(0, 0, 255, 1);
}
#menu_container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 255, 1);
z-index: 0;
visibility: hidden;
}
#menu {
transition-duration: 500ms;
opacity: 0;
}
#close_menu {
color: white;
font-family: raleway;
cursor: pointer;
}
</style>
</head>
<body>
<div id="button" onclick="openMenu()"></div>
<div id="menu_container">
<div id="menu">
<center>
<h1 id="close_menu" onclick="closeMenu()">CHIUDI</h1>
</center>
</div>
</div>
<script>
function openMenu() {
document.getElementById('button').style.boxShadow = '0px 0px 0px 100em rgba(0,0,255,1)';
setTimeout(showMenu, 500);
}
function showMenu() {
document.getElementById('menu_container').style.visibility = 'visible';
document.getElementById('menu_container').style.zIndex = '2';
document.getElementById('menu').style.opacity = '1';
}
function closeMenu() {
document.getElementById('menu').style.opacity = '0';
setTimeout(hideMenu, 400);
}
function hideMenu() {
document.getElementById('menu_container').style.visibility = 'hidden';
document.getElementById('menu_container').style.zIndex = '0';
document.getElementById('button').style.boxShadow = '0px 0px 0px 0px rgba(0,0,255,1)';
}
</script>
</body>
</html>-UPDATE-
나는 CSS 중요한 속성을 사용하려고하지만 그것은 작동하지 않습니다. ! important 규칙을 사용하면 JavaScript가 해당 규칙에 영향을 미치지 않지만 (그렇다면) 규칙 자체에 상자 그림자를 사용해야하므로 JavaScript가 편집해야합니다.
기본적으로 박스 섀도우 호버 규칙에서! important를 사용하여이 버그를 수정 하겠지만 메뉴를 열면 애니메이션이 더 이상 표시되지 않습니다.
죄송합니다 영어 문법 오류 : 여기 기능입니다. – Zero