我知道如何在缩略图上单独创建简单的标题和悬停标题,但如何一起做,就像缩略图上有一个简单的标题一样,当它悬停时会显示详细标题
HTML
<div class="row">
<div class="col-sm-4">
<div class="thumbnail">
<div class="caption">
<h2>Simple Caption</h2>
<h3>detail caption</h3>
<hr>
<p><a class="btn btn-default" role="button">Shop Now</a></p>
</div>
<img src="one.jpg" alt="one">
</div>
</div>
</div>
CSS
.caption {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background:rgba( 235,235,235, 0.91) ;
color:#5B5E5E !important;
text-align:center;
width:350px;
height:600px;
padding:150px;
display:none;
}
h2 应该在悬停之前显示为缩略图标题。
但是当悬停时它应该显示 h2 以及 h3 和 p。
这是 link显示 NICE LILY。我想像这样转换标题。
我怎样才能做到这一点。
我们将不胜感激。
最佳答案
抱歉没有看到您的链接...我会在下面留下我之前的回答,以防有人想要这种行为... New fiddle
不要在您的标题中显示:无,而是在您不想显示的元素 (h3, p) 上显示无。然后在标题上添加悬停并选择它的子项...然后您可以添加任何您想要的动画。
.thumbnail {
position:relative;
}
.thumbnail:hover .caption {
display:block;
}
.caption {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
color:#5B5E5E !important;
text-align:center;
width:350px;
height:600px;
padding:150px;
display:block;
}
.caption h3, .caption p {
display:none;
}
.caption:hover {
background:rgba( 235,235,235, 0.91) ;
}
.caption:hover h3, .caption:hover p {
display:block;
}
这就是我假设您想要发生的...
- 用户将鼠标悬停在图片上并查看简单的标题 (h2)
- 然后用户将鼠标悬停在 h2 上并显示详细说明 (h3)
我有一个 jsfiddle,您可以在其中查看示例... enter link description here
首先,您需要在缩略图上添加悬停以显示标题。然后你需要告诉标题中的 h3 隐藏。然后选择悬停的 h2 和它的兄弟 h3 并在其上进行显示。请注意,这不适用于早期版本的 Internet Explorer。最后这就是您的 CSS 的样子...
.thumbnail {
position:relative;
}
.thumbnail:hover .caption {
display:block;
}
.caption {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background:rgba( 235,235,235, 0.91) ;
color:#5B5E5E !important;
text-align:center;
width:350px;
height:600px;
padding:150px;
display:none;
}
.caption h3 {
display:none
}
.caption h2:hover + h3 {
display:block;
}
关于javascript - 使用 CSS3 转换缩略图标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28613120/