这有点棘手，但我不知何故知道了您要寻找的东西。我只是设置了不同的html标签，但我认为我的代码可以理解。但是无论如何，如果您有任何澄清，请一定要问：）
所以，这是我所做的总结：
HTML代码的第一步，我将所有图像（图标记）包装在div标签（容器类）中。然后我颠倒了图像的顺序。
<div class="wrapper">
<div class="container">
<figure>
<span>image 4 - review</span>
<figcaption>This is review</figcaption>
</figure>
<figure>
<span>image 3 - implementation</span>
<figcaption>This is implementation</figcaption>
</figure>
<figure>
<span>image 2 - recommendation</span>
<figcaption>This is recommendation</figcaption>
</figure>
<figure>
<span>image 1 - discovery</span>
<figcaption>This is discovery</figcaption>
</figure>
</div>
</div>
为什么要逆转？让我们继续下面的第二步。
第二个将是CSS部分。我颠倒了图像的顺序，以为应该显示最后一个图像的标题时不要将其标题悬停，但是如果将其兄弟姐妹悬停则不显示任何标题。但是我首先给图像“ float：right”（图标记），以便它以正确的顺序作为输出。
figure {
display: inline-block;
float: right;
margin: 5px;
}
默认情况下，所有标题均为“显示：无”，但最后一个图像（按我的HTM1代码的顺序为图像1）的标题为“显示：块”。
figcaption {
position: absolute;
left: 0;
display: none;
}
figure:last-child figcaption {
display: block;
}
然后，每当图像的标题（最后一个图像除外）都悬停时，我都会给出“ display：block”。
figure:not(last-child):hover figcaption {
display: block;
}
要“显示：无”，最后一个图像的标题（按照我的HTMl代码的顺序显示图像1），您必须使用“〜”（图：not（最后一个孩子）：悬停〜图：last-child figcaption）CSS选择器即可实现。
figure:not(last-child):hover ~ figure:last-child figcaption {
display: none;
}
“〜” css选择器的一般思想是指向所有前面的元素。
这是完整的代码：
.container {
float: left;
}
figure {
display: inline-block;
float: right;
margin: 5px;
}
figure span {
display: block;
width: 150px;
height: 100px;
border: 1px solid;
}
figcaption {
position: absolute;
left: 0;
display: none;
}
figure:last-child figcaption {
display: block;
}
figure:not(last-child):hover figcaption {
display: block;
}
figure:not(last-child):hover ~ figure:last-child figcaption {
display: none;
}
<div class="wrapper">
<div class="container">
<figure>
<span>image 4 - review</span>
<figcaption>This is review</figcaption>
</figure>
<figure>
<span>image 3 - implementation</span>
<figcaption>This is implementation</figcaption>
</figure>
<figure>
<span>image 2 - recommendation</span>
<figcaption>This is recommendation</figcaption>
</figure>
<figure>
<span>image 1 - discovery</span>
<figcaption>This is discovery</figcaption>
</figure>
</div>
</div>
,
您需要编写几行Javascript，请检查以下代码
$('.image-slide a').hover(function() {
$('.paragraph-slide').hide();
var target = $(this).attr('href');
$(target).show();
});
.image-slide {
margin: 50px 0px 30px 50px;
}
.company-process h3 {
font-family: "Cinzel-Regular";
font-size: 22px;
color: #1a1a1a;
text-align: center;
margin: 50px 0 5px 0;
}
.company-process img {
cursor: pointer;
}
.company-process .paragraph-slide p {
font-family: "Raleway-Regular";
font-size: 16px;
color: #666666;
margin: 20px 50px 20px 50px;
padding: 0;
}
.paragraph-slide {
display: none;
}
.paragraph-slide.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-slide">
<a href="#discovery"><img src="discovery.jpg" alt="discovery"></a>
<a href="#recommendation"><img src="recommendation.jpg" alt="recommend"></a>
<a href="#implementaion"><img src="implementaion.jpg" alt="implementation"></a>
<a href="#review"><img src="review.jpg" alt="review"></a>
</div>
<div id="discovery" class="paragraph-slide active">
<h3>Discovery</h3>
<p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail to
formulate the right financial plan to work towards your needs and goals.</p>
</div>
<div id="recommendation" class="paragraph-slide">
<h3>Recommendation</h3>
<p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail to
formulate the right financial plan to work towards your needs and goals.</p>
</div>
<div id="implementaion" class="paragraph-slide">
<h3>Implementaion</h3>
<p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail to
formulate the right financial plan to work towards your needs and goals.</p>
</div>
<div id="review" class="paragraph-slide">
<h3>Review</h3>
<p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail to
formulate the right financial plan to work towards your needs and goals.</p>
</div>
,
使用img的title属性<img src="...." alt="this will show if the image is not loaded" title="this will show on hover"/>
,
您可以执行以下操作。
将文本移动到锚标记中。设置一个面板以将文本相对放置。将文本隐藏为默认值，即当锚点悬停时显示文本。
.pane {position:relative;}
.pane .image-slide img {height:100px;}
.pane a {float:left;}
.pane .paragraph-slide
{
position:absolute;
display:none;
top: 150px;
left: 0;
}
.pane a:hover .paragraph-slide {
display:block;
}
.image-slide {
margin: 50px 0px 30px 50px;
}
.company-process h3 {
font-family: 'Cinzel-Regular';
font-size: 22px;
color: #1a1a1a;
text-align: center;
margin: 50px 0 5px 0;
}
.company-process img {
cursor: pointer;
}
.company-process .paragraph-slide p {
font-family: 'Raleway-Regular';
font-size: 16px;
color: #666666;
margin: 20px 50px 20px 50px;
padding: 0;
}
<div class="pane">
<div class="image-slide">
<a href="#discovery"><img src="https://www.fillmurray.com/200/300" alt="discovery">
<div id="discovery" class="paragraph-slide">
<h3>Discovery</h3>
<p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail
to formulate the right financial plan to work towards your needs and goals.</p>
</div>
</a>
<a href="#recommendation"><img src="https://www.fillmurray.com/300/300" alt="recommend">
<div id="recommendation" class="paragraph-slide">
<h3>Recommendation</h3>
<p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail
to formulate the right financial plan to work towards your needs and goals.</p>
</div>
</a>
<a href="#implementaion"><img src="https://www.fillmurray.com/400/300" alt="implementation">
<div id="implementaion" class="paragraph-slide">
<h3>Implementaion</h3>
<p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail
to formulate the right financial plan to work towards your needs and goals.</p>
</div>
</a>
<a href="#review"><img src="https://www.fillmurray.com/200/300" alt="review">
<div id="review" class="paragraph-slide">
<h3>Review</h3>
<p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail
to formulate the right financial plan to work towards your needs and goals.</p>
</div>
</a>
</div>
</div>
本文链接：https://www.f2er.com/3112803.html
