CSS：使用flexbox语法（vw，vh）将div叠加在一起？

时间：2017-02-22 03:28:12

标签： javascript jquery html css web 

.thumbnail{
	padding: 0px 0px 0px 0px;
    border:1px solid gray;
    background-color: white;
    border-radius: 5px;
    margin: 5px 10px 5px 10px;
    min-width: 10vw;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    z-index: 1000;
}

.thumbnail_img{
	width: 100%;
    height: auto;
    z-index: 1000;
}

p.caption_heading{
	font-weight: bold;
    line-height: 1em;
    font-size: 20px;
  
}
span.caption_desc{
	font-size:15px;
	color: gray;
}

.caption{
	flex-grow: 1;
	z-index: 1000;
	background-color: white; 
}

.thumbnail_footer{
	padding: 0px 10px 10px 10px;
	background-color: white;
	z-index: 1000;
}


.description{
    position: absolute;
    width: 12.7vw; /* as image */
    height: 40vh; /* as image */
    line-height: 200px; /* as image */
    text-align: center;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.0);
    font-weight: bold;
    z-index: 0;
    border-radius: 5px;
    background-color: rgba(252, 111, 27, 0.0);
    transition: background-color 0.5s ease;
    display: flex;
    flex-direction : column;
}


div.description_heading {
	font-size: 20px;
	 /* font-size: calc(4vw + 4vh + 2vmin); */
	font-weight: bold;
	line-height: 2em;
}

div.description_desc {
	font-size: 15px;
	line-height: 2em;
}

.thumbnail:hover .description {
	position:absolute;
    z-index: 1000;
    display:block;
    background-color: rgba(252, 111, 27, 0.9);
    color: rgba(255, 255, 255, 0.9);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="flex_body" style="display: flex; flex-direction: row; justify-content: space-between; ">
<div class="thumbnail">
				 <div class="thumbnail_img">
			      <img class="thumbnail_img" src="./resources/img/size_minmuri1.jpg" alt="...">
			      </div>
			      <div class="caption">
			        <p class="caption_heading">Item name<br/>
			        <span class="caption_desc">Item description</span></p>
			      </div>
			      <div class="thumbnail_footer">
			        <a href="#" class="btn btn-primary" role="button">Read</a> <a href="#" class="btn btn-default" role="button">Button</a>	     
			      </div>
			      <!-- overlay item  -->
			       <div class="description" href="#">
			       		<div class="description_heading"><br>_____<br>Item name<br>_____</div>
			       		<div class="description_desc">Item description</div>
			       		
			       </div>
			       <!-- overlay item  -->
			    </div>
</div>

当用户将鼠标悬停在div上时，我一直在努力实现效果，它会显示颜色叠加。这很简单。然而问题是我使用flex，vw和vh，因为我想制作响应式网站。因此，当我使div的大小完全匹配时，一旦浏览器大小变得不同，它就不再匹配了。我试图在互联网上找到任何例子，但那些通常是固定大小的px或位置。我想知道是否有办法在另一个div上叠加颜色div。如果没有解决方案，我想我必须将站点重建为无响应。

这是HTML 

<div class="thumbnail">
  <div class="thumbnail_img">
    <img class="thumbnail_img" src="./resources/img/size_minmuri1.jpg" alt="...">
    </div>
    <div class="caption">
      <p class="caption_heading">Item name<br/>
          <span class="caption_desc">Item description</span></p>
    </div>
    <div class="thumbnail_footer">
    <a href="#" class="btn btn-primary" role="button">Read</a> <a href="#" class="btn btn-default" role="button">Button</a>      
    </div>
    <!-- overlay item  -->
    <div class="description" href="#">
        <div class="description_heading"><br>_____<br>Item name <br>_____</div>
        <div class="description_desc">item description</div>        
    </div>
    <!-- overlay item  -->
</div>

因此，当用户将鼠标悬停在缩略图div上时，应显示描述div并覆盖整个缩略图div。

这是CSS 

.thumbnail{
   padding: 0px 0px 0px 0px;
   border:1px solid gray;
   background-color: white;
   border-radius: 5px;
   margin: 5px 10px 5px 10px;
   min-width: 10vw;
   min-height: 40vh;
   display: flex;
   flex-direction: column;
   cursor: pointer;
   z-index: 1000;
 }

.thumbnail_img{
   width: 100%;
   height: auto;
   z-index: 1000;
}

p.caption_heading{
   font-weight: bold;
   line-height: 1em;
   font-size: 20px;
}
span.caption_desc{
   font-size:15px;
   color: gray;
 }

.caption{
   flex-grow: 1;
   z-index: 1000;
   background-color: white; 
}

.thumbnail_footer{
   padding: 0px 10px 10px 10px;
   background-color: white;
   z-index: 1000;
 }


 .description{
   background:rgba(252, 111, 27, 0.75);
   text-align:center;
   padding:45px 0 66px 0;
   opacity:0;
   -webkit-transition: opacity .25s ease;
   -moz-transition: opacity .25s ease;
  }


 div.description_heading {
   font-size: 20px;
   font-weight: bold;
   line-height: 2em;
 }

div.description_desc {
   font-size: 15px;
   line-height: 2em;
 }

.thumbnail:hover .description {
   opacity: 1; 
  }

1 个答案:

答案 0 :(得分：0)

  

你的代码犯了很多错误。

您没有设置左右绝对位置。如果您的排名为absolute，则应设置left right top和bottom css属性。如果您只想为hover设置image效果，则需要在image position relative内设置div。然后，您的hover内容将与image一起放置。如果您将width height设置为100%，则fixed和width会设置responsive。

我修复了您的问题，但内容中的描述除外。

  

现在你自己。

.thumbnail{
	padding: 0px 0px 0px 0px;
    border:1px solid gray;
    background-color: white;
    border-radius: 5px;
    margin: 5px 10px 5px 10px;
    min-width: 10vw;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    z-index: 1000;
    position: relative;
}

.thumbnail_img{
	width: 100%;
    height: auto;
    z-index: 1000;
    position: relative;
}

p.caption_heading{
	font-weight: bold;
    line-height: 1em;
    font-size: 20px;
  
}
span.caption_desc{
	font-size:15px;
	color: gray;
}

.caption{
	flex-grow: 1;
	z-index: 1000;
	background-color: white; 
}

.thumbnail_footer{
	padding: 0px 10px 10px 10px;
	background-color: white;
	z-index: 1000;
}


.description{
    position: absolute;
    width: 100%; /* as image */
    height: 100%; /* as image */
    line-height: 200px; /* as image */
    text-align: center;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.0);
    font-weight: bold;
    z-index: 0;
    border-radius: 5px;
    background-color: rgba(252, 111, 27, 1);
    transition: background-color 0.5s ease;
    display: flex;
    flex-direction : column;
    left: 0;
    top: 0;
}


div.description_heading {
	font-size: 20px;
	 /* font-size: calc(4vw + 4vh + 2vmin); */
	font-weight: bold;
	line-height: 2em;
}

div.description_desc {
	font-size: 15px;
	line-height: 2em;
}

.thumbnail:hover .description {
	/*position:absolute;*/
    z-index: 1000;
    /*display:block;*/
    background-color: rgba(252, 111, 27, 0.9);
    color: rgba(255, 255, 255, 0.9);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="flex_body" style="display: flex; flex-direction: row; justify-content: space-between; ">
<div class="thumbnail">
				 <div class="thumbnail_img">
			      <img class="thumbnail_img" src="https://placehold.it/100x100" alt="...">
            <div class="description" href="#">
			       		<div class="description_heading"><br>_____<br>Item name<br>_____</div>
			       		<div class="description_desc">Item description</div>
			       		
			       </div>
			      </div>
			      <div class="caption">
			        <p class="caption_heading">Item name<br/>
			        <span class="caption_desc">Item description</span></p>
			      </div>
			      <div class="thumbnail_footer">
			        <a href="#" class="btn btn-primary" role="button">Read</a> <a href="#" class="btn btn-default" role="button">Button</a>	     
			      </div>
			      <!-- overlay item  -->
			       
			       <!-- overlay item  -->
			    </div>
</div>

希望这会对你有所帮助。

相关问题
最新问题