Question

如何在CSS中将顶部div子项悬停时如何上下停止底部div

容器<div class="procontainer">包含两个<div>元素。顶部<div>包含产品信息，底部<div>包含带有输入字段的表单。当我悬停任何产品时，格式<div>向下移动。

当我将鼠标悬停在产品<div>上时，我想防止底部<div>发生移动。

顶部div高度必须是灵活的基数

 <style> 
                                          
html{
   box-sizing: content-box;; 
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;  
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
}
.procontainer {  
  background: #F0F0F0; 
  margin-top: -2%;
  min-height: 700px;
  max-height: auto; 
  overflow: hidden;  
            } 
.mini-container{ width:73%}
/* wrapper */
.time-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 20px auto 100px auto;
  padding: 0;
  background: #fff; 
  overflow: hidden;
}

/* lists */
.time-row ul {
  margin: 0;
  padding: 0;
  font-size: inherit;
}

.time-row ul li {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  list-style: none;
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
  .time-row ul li {
    font-size: 13px;
  }
}
@media only screen and (max-width: 479px) {
  .time-row ul li {
    font-size: 13px;
  }
} 
.time-row ul li {
  padding: 5px 10px;
}

/* time-rows */
.time-row {
  padding: 20px 0;
  height: 30px;
  font-size: 0;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-out;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
   clear: both;
    position: relative;
    background: #fff;   
    width:auto;
}

.time-row:hover { 
  height: 65px;  
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    background: #375976;  
    width:auto;
    color: #fff;
   transition: height 1s;
}
@media only screen and (max-width: 767px) {
  .time-row:hover {
    height: 85px;
  }
}
@media only screen and (max-width: 359px) {
  .time-row:hover {
    height: 105px;
  }
}


.nfl {
  border-left: 3px solid #1c616c;
}

.nfl:hover {
  border-left: 3px solid #4fc0d2;
}

.mlb {
  border-left: 3px solid #1d6e4b;
}

.mlb:hover {
  border-left: 3px solid #52d29a;
}

.nhl {
  border-left: 3px solid rgba(157, 121, 25, 0.7);
}

.nhl:hover {
  border-left: 3px solid rgba(231, 196, 104, 0.7);
}

.pga {
  border-left: 3px solid #952f12;
}

.pga:hover {
  border-left: 3px solid #eb7655;
}  

/* more content */
ul.more-content li {
  position: relative;
  top: 8px;
  font-size: 13px;
  margin: 0;
  padding: 15px 13px;
  display: block;
  height: 50px;
  width: 100%;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  ul.more-content li {
    font-size: 11px;
  }
} 
</style>

  <div class="col-md-12 col-sm-12 col-xs-12 procontainer ">
                <div class="col-md-12 col-sm-12 col-xs-12">
                      <section id="content1"> 
  <div class="time-wrapper">
  <div class="time-row mlb">
      <ul>
        <li><a href="#">MLB</a><span class="small">(update)</span></li>
        <li>$10</li>
        <li><span class="update1">1</span><span class="update2">2</span></li>
        <li>10</li>
        <li>1:00ET</li>
      </ul>
      <ul class="more-content">
        <li> 
            This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </div>
  <div class="time-row mlb ">
      <ul>
        <li><a href="#">MLB</a><span class="small">(update)</span></li>
        <li>$10</li>
        <li><span class="update1">1</span><span class="update2">2</span></li>
        <li>10</li>
        <li>1:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </div>
  <div class="time-row mlb ">
      <ul>
        <li><a href="#">MLB</a><span class="small">(update)</span></li>
        <li>$10</li>
        <li><span class="update1">1</span><span class="update2">2</span></li>
        <li>10</li>
        <li>1:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </div>
  <div class="time-row mlb">
      <ul>
        <li><a href="#">MLB</a><span class="small">(update)</span></li>
        <li>$10</li>
        <li><span class="update1">1</span><span class="update2">2</span></li>
        <li>10</li>
        <li>1:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </div>
  </div>

                        </section>   
                </div>
           <div class="col-md-8 col-md-offset-1 col-sm-8 col-xs-12 searchcontent" >   
                   <div class="col-md-12 col-sm-12 col-xs-12 city-search-box">  
                  <div class="quickSearchContainer" >
                      <input id="autocomplete" name="query" placeholder="Add More City" class="searchfield" type="search" autocomplete="off">
                      <div class="quickSearchDiv">
                            <ul class="quickSearch" > 
         </ul>	
        </div>  
             </div>  
                  </div>     
               </div> 
 </div>

Answer 1

您需要进行一些更改

.time-row:hover {
    height: auto;
    overflow: visible;
}

.time-row:hover ul.more-content {
    position: absolute;
    background: #375976;
    z-index: 9;
    width:100%;
    /* border-radius: 10px; */
    border-left: 3px solid #52d29a;
    margin-left: -3px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.time-row.mlb {
    position: relative;
}

ul.more-content li {
    padding: 0 13px;
}

请参阅下面的演示

 <style> 
                                          
html{
   box-sizing: content-box;; 
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;  
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
}
.procontainer {  
  background: #F0F0F0; 
  margin-top: -2%;
  min-height: 700px;
  max-height: auto; 
  overflow: hidden;  
            } 
.mini-container{ width:73%}
/* wrapper */
.time-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 20px auto 100px auto;
  padding: 0;
  background: #fff; 
  overflow: hidden;
}

/* lists */
.time-row ul {
  margin: 0;
  padding: 0;
  font-size: inherit;
}

.time-row ul li {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  list-style: none;
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
  .time-row ul li {
    font-size: 13px;
  }
}
@media only screen and (max-width: 479px) {
  .time-row ul li {
    font-size: 13px;
  }
} 
.time-row ul li {
  padding: 5px 10px;
}

/* time-rows */
.time-row {
  padding: 20px 0;
  height: 30px;
  font-size: 0;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-out;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
   clear: both;
    position: relative;
    background: #fff;   
    width:auto;
}

.time-row:hover { 
  height: 65px;  
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    background: #375976;  
    width:auto;
    color: #fff;
   transition: height 1s;
}
@media only screen and (max-width: 767px) {
  .time-row:hover {
    height: 85px;
  }
}
@media only screen and (max-width: 359px) {
  .time-row:hover {
    height: 105px;
  }
}


.nfl {
  border-left: 3px solid #1c616c;
}

.nfl:hover {
  border-left: 3px solid #4fc0d2;
}

.mlb {
  border-left: 3px solid #1d6e4b;
}

.mlb:hover {
  border-left: 3px solid #52d29a;
}

.nhl {
  border-left: 3px solid rgba(157, 121, 25, 0.7);
}

.nhl:hover {
  border-left: 3px solid rgba(231, 196, 104, 0.7);
}

.pga {
  border-left: 3px solid #952f12;
}

.pga:hover {
  border-left: 3px solid #eb7655;
}  

/* more content */
ul.more-content li {
  position: relative;
  top: 8px;
  font-size: 13px;
  margin: 0;
  padding: 15px 13px;
  display: block;
  height: 50px;
  width: 100%;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  ul.more-content li {
    font-size: 11px;
  }
} 

/*newly added */
.time-row:hover {
height: auto;
overflow: visible;
}

.time-row:hover ul.more-content {
position: absolute;
background: #375976;
z-index: 9;
width:100%;
/* border-radius: 10px; */
border-left: 3px solid #52d29a;
margin-left: -3px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

.time-row.mlb {
position: relative;
}

ul.more-content li {
padding: 0 13px;
}





</style>

  <div class="col-md-12 col-sm-12 col-xs-12 procontainer ">
                <div class="col-md-12 col-sm-12 col-xs-12">
                      <section id="content1"> 
  <div class="time-wrapper">
  <div class="time-row mlb">
      <ul>
        <li><a href="#">MLB</a><span class="small">(update)</span></li>
        <li>$10</li>
        <li><span class="update1">1</span><span class="update2">2</span></li>
        <li>10</li>
        <li>1:00ET</li>
      </ul>
      <ul class="more-content">
        <li> 
            This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </div>
  <div class="time-row mlb ">
      <ul>
        <li><a href="#">MLB</a><span class="small">(update)</span></li>
        <li>$10</li>
        <li><span class="update1">1</span><span class="update2">2</span></li>
        <li>10</li>
        <li>1:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </div>
  <div class="time-row mlb ">
      <ul>
        <li><a href="#">MLB</a><span class="small">(update)</span></li>
        <li>$10</li>
        <li><span class="update1">1</span><span class="update2">2</span></li>
        <li>10</li>
        <li>1:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </div>
  <div class="time-row mlb">
      <ul>
        <li><a href="#">MLB</a><span class="small">(update)</span></li>
        <li>$10</li>
        <li><span class="update1">1</span><span class="update2">2</span></li>
        <li>10</li>
        <li>1:00ET</li>
      </ul>
      <ul class="more-content">
        <li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
      </ul>
    </div>
  </div>

                        </section>   
                </div>
           <div class="col-md-8 col-md-offset-1 col-sm-8 col-xs-12 searchcontent" >   
                   <div class="col-md-12 col-sm-12 col-xs-12 city-search-box">  
                  <div class="quickSearchContainer" >
                      <input id="autocomplete" name="query" placeholder="Add More City" class="searchfield" type="search" autocomplete="off">
                      <div class="quickSearchDiv">
                            <ul class="quickSearch" > 
         </ul>	
        </div>  
             </div>  
                  </div>     
               </div> 
 </div>

如何防止底部div随着鼠标悬停调整元素大小而移动？

1 个答案: