1
ちょっとしたメニューのアイデアのためにいくつかのテストを行っていました。 アイデアはちょうど画面の左上隅に小さな点を持つことです。 オーバーウィングすると、ボックスの影が大きくなります。クリックすると拡大します（幅：100％、高さ：100％）。その後、同じ色の隠しdivが表示されます。 メニューが閉じるクローズボタン（CHIUDI）をクリックするとメニューが開きますが、画面のコーナーにあるドットのホバープロパティは機能しなくなります。
私はCSSルールを修正するためにJavaScriptを使用しているので、これは起こると思います。メニューを閉じるときには、ボックスシャドウを0に設定します。
これはおそらく問題です。 ：hover CSSプロパティ
純粋なJavaScriptを使用してこれを修正する方法はありますか？ （いいえjQuery）。 ！
はここのコードです：
JavaScript Domの後にCSSホバーが動作しない
<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の重要なプロパティを使用しようとしましたが、それは動作しません。 ！重要なルールを使用すると、JavaScriptはそのルールに影響しませんが（私が正しい場合）、アニメーション自体を作成するためにボックスシャドウを使用する必要があるため、JavaScriptはそのルールを編集する必要があります。
基本的に、ボックスシャドウホバールールで！importantを使用して、このバグを修正しますが、メニューを開くと、アニメーションは表示されません。
でも英語の文法エラーのため申し訳ありません：ここでの関数です。 – Zero