我试图将一个名为 chooseArena 的菜单隐藏在一个名为 header 的较大 div 中。当我隐藏 chooseArena 时，它也会隐藏较大 div 的图像。我该怎么做才能只隐藏较小的 div 而不是 larder div 的图像。
这是我的 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>
这是我的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;
}
最佳答案
试试这个:
$('#chooseArena').css("opacity","0");
我的猜测是隐藏 div，这意味着将其设置为“显示:无”会将标题高度和宽度设置为 auto，因此您看不到背景图像。
关于javascript - 隐藏 div 也会隐藏父 div 的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41769776/