Question

此页面是一个网格容器，其中包含一些图像作为帖子列表、标题和左侧菜单： JSFiddle1

当我将鼠标悬停在图片上时，会出现两个链接：“评论”和“查看帖子”。我想使用 CSS，当我点击这两个中的任何一个时，它会导致我这样的事情： JSFiddle

我想使用 display: none; 但我不知道我应该把它放在哪里。

Answer 1

如果我正确理解您的问题，这是您问题的可能解决方案。

function changeContainer(){
  if($('.grid-container-before').css('visibility') === 'visible') {
    $('.grid-container-before').css('visibility','hidden');
    $('.grid-container-before').css('display','none');
    $('.grid-container-after').css('visibility','visible');
    $('.grid-container-after').css('display','grid');
  }
}

 body {
   padding-top: 73px;
   overflow-y: hidden;
 }

 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }

 /* ------------ PAGE SCROLLBAR ------------ */
 *::-webkit-scrollbar {
   width: 2px;
 }

 *::-webkit-scrollbar-track {
   background: white;
 }

 *::-webkit-scrollbar-thumb {
   background-color: grey;
   border-radius: 20px;
   height: 2px;
 }

 /* ------------ navbar ------------ */
 .header {
   display: flex;
   position: fixed;
   background-color: white;
   width: 100%;
   justify-content: space-between;
   z-index: 7;
   font-family: Libre Franklin;
   top: 0;
   left: 0;
 }

 .header-flex-list {
   display: flex;
   margin-top: 10px;
   justify-content: flex-end;
   flex: 50%;
 }

 .header-list {
   list-style: none;
   display: flex;
 }

 .header-list a {
   text-decoration: none;
   color: #000;
   font-size: 12px;
   padding: 0px 20px 0px 20px;
 }

 .top-icon-container {
   display: flex;
   padding: 10px 50px;
   flex-wrap: wrap;
 }

 .icon-column {
   width: 10%;
   border-radius: 50px;
 }

 .p-column {
   width: 28%;
   padding-left: 10px;
 }

 #top-bar-icon {
   display: block;
   max-width: 100%;
   height: auto;
   object-fit: cover;
   border-radius: 50px;
   border: 2px solid #73AD21;
 }

 /* ------------ LEFT MENU ------------ */
 .container {
   display: flex;
   justify-content: space-between;
   height: 100vh;
 }

 .left-menu {
   width: 18%;
   order: 1;
   height: 100vh;

   /* overflow-y: scroll; */
   padding: 0px 0px 10px 45px;
 }

 .menu-list {
   list-style: none;
   line-height: 2.5rem;

   /* display: flex;
  flex-direction: column; */
   margin-left: -25px;
 }

 .menu-list a {
   text-decoration: none;
 }

 /* ------------ MAIN POSTS ------------ */

 .main-posts {
   width: 100%;
   order: 2;
   padding: 0px 20px 0px 20px;
   overflow-y: auto;
   text-align: center;
   scrollbar-width: thin;
   scrollbar-color: grey white;
 }
 
 /* ------------ MAIN POSTS LISTS ------------ */

 .grid-container-before {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
   grid-gap: 1rem;
   width: 100%;
   margin: 0 auto;
   margin-bottom: 6rem;
   visibility: visible;
 }
 
 .grid-container-after {
  display: grid;
  grid-template-columns: 80% 1fr;
  grid-gap: 10px;
  height: 300px;
  visibility: hidden;
  display:none;
 }
 
 .box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

 .posts {
   display: flex;
 }

 .img__wrap {
   position: relative;
 }

 .posts-image {
   height: 350px;
   width: 100%;
   object-fit: cover;
 }

 .overlay {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: white;
   color: #000;
   visibility: hidden;
   opacity: 0;

   /* transition effect. not necessary */
   transition: opacity 0.2s, visibility 0.2s;
 }

 .text {
   color: white;
   font-size: 15px;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
 }

 .text a {
   color: #000;
   text-decoration: none;
   padding-right: 20px;
 }

 [data-title]::after {
   content: attr(data-title);
   background-color: #000;
   color: #fff;
   font-size: 13px;
   ;
   position: absolute;
   padding: 10px;
   bottom: -3.6em;
   left: 50%;
   white-space: nowrap;
   box-shadow: 1px 1px 3px #222222;
   opacity: 0;
   border: 1px solid #111111;
   z-index: 99999;
   visibility: hidden;
 }

 [data-title]:hover::after {
   opacity: 1;
   transition: all 0.1s ease 0.5s;
   visibility: visible;
 }


 [data-title] {
   position: relative;
 }

 .img__wrap:hover .overlay {
   visibility: visible;
   opacity: 1;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
  <link href="//fonts.googleapis.com/css?family=Karla|Syne|Libre+Franklin|Bai+Jamjuree|Chakra+Petch|Gotu" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<!------------ TOP MENU ------------>
<header id="header" class="header">
  <div id="top-container" class="top-icon-container">
    <div class="icon-column">
      <img id="top-bar-icon" src="https://s4.uupload.ir/files/top-bar-icon_ensh.png" alt="my logo:)">
    </div>
    <div class="p-column">
      <p>Name it what u want!</p>
    </div>
  </div>
  <div class="header-flex-list">
    <ul class="header-list">
      <li><a href="#">TERMS OF USE</a></li>
      <li><a href="#">HAVE A QUESTION</a></li>
      <li><a href="#">ABOUT ME</a></li>
    </ul>
  </div>
</header>

<body>
  <div class="container">

    <!------------ LEFT MENU ------------>
    <nav id="menu" class="left-menu">
      <p style="text-decoration: none; color: black;">Filter by:</p>
      <ul class="menu-list">
        <li><a>Popular pages</a></li>
        <li><a>About pages</a></li>
        <li><a>Character pages</a></li>
        <li><a>Music pages</a></li>
      </ul>
    </nav>
    <!------------ MAIN POSTS ------------>
    <section id="main-content" class="main-posts">
      <div class="grid-container-before">
        <div class="img__wrap">
          <img class="posts-image" src="https://www.webdevelopersnotes.com/wp-content/uploads/random-image-display-using-javascript-2.png" alt="project" />
          <div class="overlay">
            <div class="text">
              <button href="#" data-title="comments" onclick="changeContainer()">
                <i class="fa fa-comments fa-fw"></i>comment</button>
              <button href="#" data-title="view post" onclick="changeContainer()">
                <i class="fa fa-external-link fa-fw"></i></button>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-container-after">
        <div class="box a">A</div>
        <div class="box b">B</div>
      </div>
    </section>
  </div>
</body>

使用 CSS 显示和隐藏一些元素

1 个答案: