CSS分栏的实现；鼠标滑过时显示内容，鼠标移开时隐藏的实现

最新推荐文章于 2023-03-13 15:59:48 发布

原创最新推荐文章于 2023-03-13 15:59:48 发布 · 821 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

HTML, CSS, JS, Django 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS实现分栏布局的方法，通过设置不同的背景颜色和宽度来区分导航栏和页面内容区域。此外，还详细展示了如何利用CSS伪类:hover和~选择器实现当鼠标悬停在特定元素上时显示隐藏内容的效果，适用于菜单或产品展示等场景。

1.分栏的第3种实现
在这里插入图片描述

	#navigation{
		background-color:#FFDFFF;
        width:30%;
	}
	#pageContent{
		background-color:#CEFFFF;
		margin-left:30%;
	}

<div id="navigation">
            <ol>
              <li><a href="#">Arts</a></li>
              <li><a href="#">Business</a></li>
              <li><a href="#">Children</a></li>
            </ol>
          </div>
          <!-- Page Content -->
          <div id="pageContent">
            <h2>Content</h2>
            <p> Ex sonet exerci facilis sed, cetero ancillae accumsan pri eu, vix
              congue quaestio eu. Duo ea putent graeco iisque. Ei quo dicat laudem
              persius, salutatus laboramus no ius, eum dicat expetenda an. Quidam
              accusamus pro eu. Ad quo nostrum principes, eius dolores quo an. At
              has quas vivendo phaedrum. Ad vis atomorum maluisset, sit inermis
              minimum senserit cu. Dicta phaedrum duo ea, qui in ceteros imperdiet
              liberavisse. </p>
          </div>

2.CSS实现鼠标滑过时显示内容，鼠标移开时隐藏

.tab1:hover~.sushi{
  display:block;
}
.tab2:hover~.drink{
  display:block;
}
.tab3:hover~.dessert{
  display:block;
}
.tab1:hover{
  background-color: white;
}
.tab3:hover{
  background-color: white;
}
.tab2:hover{
  background-color: white;
}
.sushi:hover{
  display:block;
}
.drink:hover{
  display:block;
}
.dessert:hover{
  display:block;
}
.sushi{
  position: relative;
}

在这里插入图片描述

<div class="main">
      <div id="menu">
         menu <br>
        <div class="tab">sushi</div>
        <div class="tab">drink</div>
        <div class="tab">dessert</div>
        <div class="sushi" style="display:block;">
            <div>
              <img src="../image-and-video/hot.png" alt="hot" id="hot">
              <img src="../image-and-video/sushi-1.jpg" alt="sushi-1" >
              <form><input type="number"></form>
              <button class="btn">Add</button>
            </div>
            <div class="">
              <img src="../image-and-video/sushi-2.jpg" alt="sushi-2">
              <form><input type="number"></form>
              <button class="btn">Add</button>
            </div>
            <div class="">
              <img src="../image-and-video/sushi-3.jpg" alt="sushi-3">
              <form><input type="number"></form>
              <button class="btn">Add</button>
            </div>
            <div class="">
              <img src="../image-and-video/sushi-4.jpg" alt="sushi-4">
              <form><input type="number"></form>
              <button class="btn">Add</button>
            </div>
        </div>

        <div class="drink">
          <div class="">
            <img src="../image-and-video/drink-1.jpg" alt="drink-1">
            <form><input type="number"></form>
            <button class="btn">Add</button>
          </div>
          <div class="">
            <img src="../image-and-video/drink-2.jpg" alt="drink-2">
            <form><input type="number"></form>
            <button class="btn">Add</button>
          </div>
          <div class="">
            <img src="../image-and-video/drink-3.jpg" alt="drink-3">
            <form><input type="number"></form>
            <button class="btn">Add</button>
          </div>
        </div>

        <div class="dessert">
          <img src="../image-and-video/dessert-1.jpg" alt="dessert-1">
          <form><input type="number"></form>
          <button class="btn">Add</button>
        </div>
      </div>