如何创建占据 100% 宽度的内联块元素。第二个元素有另一个元素在悬停时显示

Question

我有一个无序列表的图像，每个图像的底部都有一个文本覆盖。文本覆盖是具有不同背景颜色的内嵌块。

首先，我在不需要的背景颜色之间得到一个空白。 ✔️

其次，左边的内联块有一个固定的宽度，而右边需要覆盖剩余的宽度✔️

第三，第二个块应该有另一个隐藏的元素，应该在悬停时显示

最后我希望这两个块在它们中的任何一个高度发生变化时始终具有均匀的高度

编辑 段落 div 需要在悬停时显示。此外，我希望内联块的高度即使在它们中的任何一个发生变化时也会出现。

这是我目前所拥有的

.slideList {
  width: 100%;
}
.slideList li {
  position:relative; 
}

.slideList .service-highlight {
  position: absolute;
  color: white;
  bottom: 0;
  left: 0; 
  right:0
}

.slideList .service-highlight p {
  display: inline-block;
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.slideList .service-highlight .services-box{
  text-align: center;
  background-color: #003768;
  width: 200px;
  font-weight: bold;
  float: left;
}

.slideList .service-highlight .services-detail{
  background-color: #0088ff;
  width:calc(100% - 200px);
  float: left;
  padding-left: 5px;
}


.slideList .hide-description {
  display: none;
  font-weight:normal;
}

.slideList .hide-description p {
  font-weight:normal;
  padding-top: 10px 5px 10px;
}

.services-detail:hover + .hide-description {
  display: block;
  position: absolute;
 }

.clearFloat {
  clear: both;
}

<ul class="slideList">

        <li data-transition="fade">
            <img src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" >
 
             <div class="service-highlight">
                <p class="services-box">SOME SERVICE:</p>
                <div class="services-detail">
                    <p>Some headline</p>
                    <div class="hide-description">
                        <p>Some text that appears here. Text describes some service I intend to achieve. This may or may not take up to three lines maybe two </p>
                    </div>
                </div>
            </div>
        </li>

<ul>

Answer 1

1 & 2) 可以通过简单地将.services-box & .service-highlight 向左浮动来去除空白，然后将固定宽度设置为.service-box，并将百分比宽度设置为.service-highlight。

3) 为此，您需要使用:hover。但是，请注意，您不能将其放在同一行，因为当您悬停时，会出现隐藏框，并且由于您的鼠标在其上，因此鼠标在新框上，因此它会失去其:hover 效果并消失回到原来的状态，因此它会使其闪烁。所以把那个新的显示框放在上面以避免这种情况。

希望这有帮助！

.slideList {
  width: 100%;
}

.slideList li {
  position:relative; 
}

.slideList .service-highlight {
  position: absolute;
  color: white;
  bottom: 0;
  left: 0; 
  right:0
}

.slideList .service-highlight p {
  display: inline-block;
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.slideList .service-highlight .services-box{
  text-align: center;
  background-color: #003768;
  width: 200px;
  font-weight: bold;
  float: left;
}

.slideList .service-highlight .services-detail{
  background-color: #0088ff;
  width:calc(100% - 202px);
  float: left;
}


.slideList .hide-description {
  display: none;
 }
 
 
 .services-detail:hover + .hide-description {
  display: block;
  position: absolute;
  bottom: 50px;
 }
 
 .clearFloat {
  clear: both;
 }

<ul class="slideList">

        <li data-transition="fade">
            <img src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" >
 
            <div class="service-highlight">
                <p class="services-box">SOME SERVICES:</p>
                <p class="services-detail">Service headline detail</p>
                
                <div class="hide-description">
<!-- Div should be a continuation of .services-detail -->
                    <p>A more detailed description of services. This should appear here. In about 3 sentences and at least three lines long</p>
                </div>
                <div class="clearFloat"></div>
            </div>
        </li>
        
<ul>

更新 2：

从您链接的参考资料中，将鼠标悬停在框上而不是文本上。我已经更改了标记，请立即查看：

* {
  margin: 0;
  padding: 0;
}

.slideList {
  width: 100%;
  height: 550px;
  background-image: url("https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.slideList ul {
  list-style: none;
}

.service-highlight {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.services-box {
  text-align: center;
  background-color: #003768;
  width: 200px;
  font-weight: bold;
  float: left;
}

.services-detail {
  background-color: #0088ff;
  width: calc(100% - 200px);
  float: left;
}

.hide-description {
  display: none;
}

.slideList:hover .hide-description {
  display: block;
  position: absolute;
  bottom: 0px;
  background-color: #0088ff;
 }

.clearFloat {
  clear: both;
}

<ul class="slideList">

  <li data-transition="fade">
    <div class="service-highlight">
      <p class="services-box">SOME SERVICES:</p>
      <p class="services-detail">Service headline detail</p>
      
      <div class="hide-description">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam animi accusamus officia accusantium quaerat distinctio, omnis neque adipisci! Rerum nemo vitae necessitatibus autem fugit ipsam in nam asperiores. Eius, vitae.
    </div>
    <div class="clearFloat"></div>
    </div>
  </li>
        
<ul>