divを非表示にすると、親divの画像も非表示になります

私は、より大きなdivというヘッダー内のchooseArenaというメニューを非表示にしようとしています。 chooseArenaを非表示にすると、より大きなdivの画像も非表示になります。私は何をするのですか？私は小さなdivだけを隠し、larder divのイメージは隠しません。divを非表示にすると、親divの画像も非表示になります

$('#chooseArena').css("opacity","0");

私の推測では意味、DIVを隠して「それを作ることである。ここでは

はこれを試してみてください、私のcssファイル

*{ 
    background-color: black; 
    margin: 0; 
    padding: 0; 
} 

#chooseArena{ 
    border: 1px solid: red; 
    margin-left: 40%; 
    width: 20%; 
    height: 200px; 
    background-color: grey; 
    margin-top: 20%; 
} 

button{ 
    background-color: white; 
    width: 30%; 
    margin-left: 7px; 
    margin-bottom: 20px; 
} 

h1{ 
    background-color: grey; 
    margin-left: 20%; 
} 

#header{ 
    height: 900px; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100%; 
    background-size: 100% 100%; 
    padding-top: 5%; 
} 

option{ 
    background-color: white; 
} 

select{ 
    background-color: white; 
}

出典

2017-01-20 Aaron

私のhtml jqueryのここ

<html> 
<head> 
    <title>Dojo Arena</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('button').hover(function(){ 
      var arena = $(this).attr('id'); 
      var id = arena + '.jpg'; 
      $('#header').css('background-image', 'url('+id+')'); 
     }, function(){ 
      $('#header').css('background-image', 'none'); 
     }); 
     $('button').click(function(){ 
      var arena = $(this).attr('id'); 
      var id = arena + '.jpg'; 
      $('#header').css('background-image', 'url('+id+')'); 
      $('#chooseArena').hide(); // This also hides the image above. What do I change so it will only hide the div and not the parent div with the background img 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="header"> 
     <div id = "chooseArena"> 
      <h1>Choose an Arena</h1> 
      <button id = "dojo">Dojo</button> 
      <button id = "beach">Beach</button> 
      <button id = "earth">Earth</button> 
      <button id = "matrix">Matrix</button> 
      <button id = "snow">Snow</button> 
      <button id = "forest">Forest</button> 
     </div> 
    </div> 
</body> 
</html>

されていますdisplay：none "はヘッダーの高さと幅をautoに設定するため、背景イメージは表示されません。

出典

2017-01-20 18:08:20

#chooseArenaは#headerの唯一の子です。デフォルトでは、ブロックレベルの要素（#header）は内部の子の高さにしかなりません。子供がいない場合、身長は0になります。したがって、#headerから#childArenaを削除すると、#headerの高さは0になります。#headerの「画像」は背景画像なので、#headerもページに表示されている場合にのみ表示されます。背景イメージはスペースを取らず、割り当てられている要素に高さを適用しません。この問題を解決するために

一つの方法は、ページ上で視覚的に#chooseArenaを非表示になります、（display: noneまたは$.hide()でそれを隠すのではなく）#chooseArena上opacity: 0;またはvisibility: hidden;を設定することですが、#chooseArenaはまだ彼らそれのように#headerにスペースを取るだろう隠されていません。

問題が解決しない場合、あなたはまだ#chooseArenaを隠すだけでなく、#headerに背景画像を表示することを背景画像の高さは何かあなたが望むどのようにマッチするheight値を与えることができます。

出典

2017-01-20 18:10:59

他の子要素がある場合、imgは消えませんか？ – Aaron

@Aaron別の子要素を追加し、 '＃header'にレイアウトがあるような位置付けがある場合、' #head'は高さを持ちます。単純な 'p'や' div'タグをテキストや実際の 'img'要素などで追加してみましょう。' #header'は '＃chooseArena'が隠されているときにその要素の高さに従います。それは '＃header'の背景イメージが完全に見えることを意味するものではありません - それは背景イメージがどのように実装されたか、あなたが'＃header'に追加する子のサイズに依存します –

divを非表示にすると、親divの画像も非表示になります

答えて

関連する問題