Question

我试图在名为header的较大div中隐藏名为chooseArena的菜单。当我隐藏chooseArena时，它也隐藏了较大div的图像。我该怎么办，所以我只隐藏较小的div而不是较大的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;
}

Answer 1

试试这个：

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

我的猜测是隐藏div，意思是制作它＆＃34;显示：无＆＃34;将标题高度和宽度设置为auto，因此您无法看到背景图像。

Answer 2

这是因为#chooseArena是#header的唯一孩子。默认情况下，块级元素（#header）只会与里面的子级一样高。如果里面没有孩子，那么它的身高将是0。因此，当您从#childArena移除#header时，#header的高度现在为0.并且＆＃34;图像＆＃34; #header中的#header是背景图片，因此仅显示页面上是否也显示opacity: 0;。背景图像不会占用任何空间或导致任何高度应用于它所分配的元素。

解决此问题的一种方法是在visibility: hidden;上设置#chooseArena或display: none（而不是将其隐藏$.hide()或#chooseArena），这将是在页面上以可视方式隐藏#chooseArena，但#header仍会占用#chooseArena中的空格，就像它们没有被隐藏一样。

如果这不起作用，您仍然可以隐藏#header，但也可以height arr一个8-element Array{UInt8,1}: 0x00 0x00 0x01 0x16 0x6a 0xe0 0x68 0x80值来匹配背景图片的高度或者您想要的高度要显示的背景图片。

隐藏div也隐藏了父div的图像

2 个答案: