Question

我知道如何在缩略图上单独创建简单的标题和悬停字幕，但如何一起完成，就像缩略图上有一个简单的标题，当它悬停时，显示详细标题

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 。

以下是显示 NICE LILY 的link。我想改变这样的标题。

我如何才能实现这一目标。

任何帮助将不胜感激。

Answer 1

抱歉没有看到你的链接......如果有人想要这种行为，我会在下面留下我之前的答案...... 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; 
}

使用CSS3转换缩略图标题

1 个答案: