如何创建占用 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：

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

* {
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>