CSS 悬停效果 Bootstrap 缩略图答案

【问题标题】：CSS hover effect Bootstrap ThumbnailCSS 悬停效果 Bootstrap 缩略图
【发布时间】：2014-06-05 09:06:08
【问题描述】：

我一直对添加 CSS 悬停效果的 Bootstrap 缩略图感到头疼。目前我在从桌面查看时正确理解了它。但在移动设备中查看时，它仍然无法正确悬停。可以给我一些解决方案吗？我使用的悬停示例来自下面的链接 http://tympanus.net/Tutorials/OriginalHoverEffects/index.html

但我只是意识到这种悬停效果不适用于移动设备。请提供任何更有效的解决方案？

下面是 HTML 和 CSS 的代码。请看一看。谢谢。

下面是 HTML

<div class="container">
  <div class="row">
    <div class="col-md-4 thumbnail view view-first">
      <img src="img/apple.jpg" alt="apple">
        <div class="mask">
          <p>.col-md-4</p>
        </div>
          <h4>.col-md-4</h4>
    </div>
  </div>
</div>

下面是 CSS 悬停效果和 CSS 动画代码

/* Overwrite custom bootstrap thumbnail */
.thumbnail {
border-top-left-radius: 40px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 40px !important;
background-color: transparent !important; 
border: 0px !important;
}

.thumbnail > img,
.thumbnail a > img {
border-top-left-radius: 40px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 40px !important;
margin-bottom: 15px;
}

/* hover effect*/
.view {
overflow: hidden;
position: relative;
text-align: center;
}
@media {
.view .mask,.view .content {
width: 312px;
height: 234px;
position: absolute;
overflow: hidden;
top: 0;
margin-top: 4px;
border-top-left-radius: 38px;
border-bottom-right-radius: 38px;
}
}
/* Media Queries */
@media screen and (min-width:320px) and (max-width:540px) {
.view .mask,.view .content {
    margin-top: 44px;
    width: 152px;
    height: 114px;
    border-top-left-radius: 38px;
    border-bottom-right-radius: 38px;
 }
}
.view img {
 display: block;
 position: relative;
}

/* Hover Effect anime */
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(124,81,161, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

【问题讨论】：

您究竟是如何尝试在移动设备上“悬停”的？
我提供了我用来做悬停效果的示例链接。请看一下并给我一些解决方案或建议。非常感谢..！

标签： css hover effect

【解决方案1】：

我不是专业人士，但我知道移动设备上没有悬停之类的东西？

在我看来，最接近但也许是最好的事情是为桌面版本制作悬停效果，为移动版本制作“点击”效果。

我再次指向悬停，如果你明白了，你必须让鼠标悬停在它上面吗？

希望对你有帮助。

【讨论】：