元素的隐藏方式

最新推荐文章于 2022-12-24 09:38:46 发布

恋恋去心

最新推荐文章于 2022-12-24 09:38:46 发布

阅读量205

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_50509134/article/details/117807364

版权

在我们制作网页的时候，有时候会遇到一些元素需要隐藏的时候，这个时候就要用到隐藏元素的功能。下面我给大家讲解隐藏元素的方法。

display

这是第一种隐藏元素的方法，当我们在元素的设置中加上display:none的时候，这个元素就会被隐藏起来，而且在这个元素隐藏的位置我们还可以放置其他的元素，也就是说，我们在使用这种方法隐藏元素的时候，隐藏的元素是不会占用空间的。那当我们要让隐藏的元素显示出来的时候，就可以使用display:block使其显示出来。

下面我们还是看一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米闪购-小米商城</title>
    <style>
        body {
    margin: 0;
    padding: 0;
    height: 2500px;
    font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif
}

.topbar {
    background-color: #333;
    height: 35px;
}


.container {
    /*块级元素居中*/
    margin: 0 auto;
    width: 1226px;
}

.container::before .container::after {
    content: '';
    display: table;

}

.container::after {
    clear: both;
}

.topbar a {
    text-decoration: none;
    color: #b0b0b0;
    font-size: 10px;
}

.topbar a:hover {
    color: #ffffff;
}

.topbar-nav {
    float: left;
    line-height: 40px;
    height: 35px;
    font-size: 0;
    margin-left: 50px;
}

.topbar-nav span {
    font-size: 12px;
    color: #424242;
    font-family: sans-serif;
    margin: 0.5rem;


}

.topbar-info, .topbar-cart {
    float: right;
}


.topbar-cart a {
    display: block;
    height: 35px;
    line-height: 35px;
    text-align: center;
    width: 120px;
    background-color: #424242;
}

.topbar-cart a:hover {
    background-color: #ffffff;
    color: #ff6700;

}

.topbar-cart span {
    margin-left: -4px;
    font-size: 12px;
}

.topbar-info{
    margin-right: 15px;
}


.topbar-info a {
    float: left;
    text-decoration: none;
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
    color: #b0b0b0;
}

.topbar-info span {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #424242;
    font-family: sans-serif;
    margin: 0.5rem;
}
.topbar-info a:hover {
    color: #ffffff;

}
.topbar-info .sep {
    padding: 0 5px;
}
#app{
    position: absolute;
    left: 693px;
    display: none;
}
#gw{
    position: absolute;
    left: 1020px;
    border: 1px solid;
    display: none; 
}
    </style>
</head>
<body>
<div class="topbar">
    <div class="container">
        <div class="topbar-nav">
            <a href="">小米商城<span>|</span></a>
            <a href="">MIUI<span>|</span></a>
            <a href="">loT<span>|</span></a>
            <a href="">云服务<span>|</span></a>
            <a href="">天星数科<span>|</span></a>
            <a href="">有品<span>|</span></a>
            <a href="">小爱开放平台<span>|</span></a>
            <a href="">企业团购<span>|</span></a>
            <a href="">资质证照 <span>|</span></a>
            <a href="">协议规则<span>|</span></a>
            <a href="" id="app1">下载app<span>|</span></a>
            <a href="">智能生活<span>|</span></a>
            <a href="">Select Location</a>
        </div>
        <div class="topbar-cart"><a href="" id="a2">购物车 <span>（0）</span></a></div>
       

    </div>
</div>
<div>
     <div class="topbar-info">
            <a href="">登录<span>|</span></a>
            <a href="">注册<span>|</span></a>
            <a href="" class="sep">消息通知</a>
        </div>
</div>
<div id="app">
    <img src="app.PNG" alt="">
</div>
<div id="gw">
    <img src="gwc.PNG" alt="">
</div>
</body>
<script>
    var a1 =document.getElementById("app1");
    var app=document.getElementById("app");
    var timer=null;
    function open1(){
        clearTimeout(timer);
        app.style.display="block";
    }
    function close1(){
        timer=setTimeout(function(){
            app.style.display="none";
        },50);
        
    }
    a1.addEventListener('mouseover',open1);
    a1.addEventListener('mouseleave',close1);
    
    var a2 =document.getElementById("a2");
    var gw=document.getElementById("gw");
    var timer=null;
    function open2(){
        clearTimeout(timer);
        gw.style.display="block";
    }
    function close2(){
        timer=setTimeout(function(){
            gw.style.display="none";
        },50);
        
    }
    a2.addEventListener('mouseover',open2);
    a2.addEventListener('mouseleave',close2);
    
</script>
</html>

在代码里我们可以看见使用的方式与方法。