5秒後にCSSを使用して重複したdivを削除する

-3

マイページに重複したdivがあり、5秒後に隠れてしまいます。しかし、divの背後にあるボタンは、divがまだ5秒後にそこにあるために押すことができないことを認識しています。5秒後にCSSを使用して重複したdivを削除する

divを削除するには、display:noneを試しましたが、動作しません。

.ox-messages { 
    -webkit-animation: seconds 1.0s forwards; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-delay: 5s; 
    animation: seconds 1.0s forwards; 
    animation-iteration-count: 1; 
    animation-delay: 5s; 
    position: relative; 
} 

@-webkit-keyframes seconds { 
    0% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    left: -9999px; 
    //display: none; 
    } 
} 
@keyframes seconds { 
    0% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    left: -9999px; 
    //display: none; 
    } 
}

問題は次のようになります：（緑色）

警告メッセージボタン（ノート・プラスアイコン）をオーバーラップしている。ここ

は私のCSSです。

ご協力ありがとうございます。

編集：position:relativeからposition:absoluteに変更します。これはボタンをブロックしませんが、メッセージは重なり合っています。あなたはそれを隠すとき

出典

2017-11-29 Brian Cheong

あなたは完全なコードを共有することができます。私たちは、テキストではJavaScriptを使用して含まれているdiv要素を取り除くため、この例では、テキストは、ウェブサイトに表示されませんか？私たちはまた、ボタンと問題を見ることができます –

申し訳ありません、私は完全なHTMLコードを共有することはできません。私はスクリーンショットを貼り付けます。 –

'display：none'はうまくいったはずです。問題の隠された要素に対して 'pointer-events：none'を宣言することを検討してください。または、ボタンに 'position'プロパティを宣言すると、' z-index'プロパティを適用してスタッキングコンテキストを活用することができます。 – UncaughtTypeError

-1

あなたがそのdivの上pointer-events: none;を設定することができ、それはもう邪魔になりません

出典

2017-11-29 08:12:38 GHB

-1

設定し、その要素がドキュメントから非表示になりますvisibility: hidden。ボタンの後ろをクリック可能にする。

.ox-messages { 
 
    -webkit-animation: seconds 1.0s forwards; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-delay: 5s; 
 
    animation: seconds 1.0s forwards; 
 
    animation-iteration-count: 1; 
 
    animation-delay: 5s; 
 
    position: relative; 
 
    height: 200px; 
 
    width: 500px; 
 
    background: red; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
@-webkit-keyframes seconds { 
 
    0% { 
 
    opacity: 1; 
 
    visibility: visible; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    } 
 
} 
 
@keyframes seconds { 
 
    0% { 
 
    opacity: 1; 
 
    visibility: visible; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    } 
 
}

<button>TEST</button> 
 
<div class="ox-messages"></div>

出典

2017-11-29 08:17:23 Red

いいえ、divを削除しないで非表示にします。 –

CSSでdivを削除することはできません。 'display：none'を指定しても、削除されません。したがって、 'JavaScript'または' jQuery'を使用してください。 – Red

任意のHTMLエディタ（または下を押してコードスニペット）にこのコードをコピー＆ペーストすること自由に感じ、あなたはJavaScript関数が実際にdiv要素を削除することがわかりますしてください。

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Page Title</title> 
 
\t </head> 
 
\t 
 
<div id="div_we_want_to_remove"> 
 
    <!-- We will not see the following text on the webpage if we execute the the JavaScript code that I included --> 
 
    <p1> It is possible to get rid of this text using javascript</p1> 
 
</div> 
 
<script> 
 
//this is the JavaScript code that's needed to get rid of that div 
 
function remove_div() { 
 
    var elem = document.getElementById('div_we_want_to_remove'); 
 
    elem.parentNode.removeChild(elem); 
 
    return false; 
 
} 
 
//remove_div literally will remove the div 
 
remove_div(); 
 

 
</script> 
 

 
</html>

出典

2017-11-29 08:23:27

ええ、私はjQueryを試しましたが、何らかの理由でそれが私の目標を満たしていません。途中でありがとう。 –

ちょっとブライアン、実際にはjQueryは必要ありません。コードを更新しました。このコードを自由にコピーしてHTMLエディタに貼り付けてください。このコードのJavascriptコードは、テキストを囲むdivを削除し、テキストがWebサイトに表示されないようにします。 –

また、display：noneを使ってdivを非表示にすると、divを取り除かずに隠すだけです。 JavaScript関数がその作業を行います。 –

5秒後にCSSを使用して重複したdivを削除する

答えて

関連する問題