Question

我一直对Bootstrap缩略图添加CSS悬停效果感到头疼。目前我从桌面查看时得到了正确的信息。但在移动设备中查看时，它仍然没有正确悬停。能不能给我一些解决方案？我使用的样本悬停来自下面的链接 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 Hover Effect和CSS Anime code

/* 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;
}

Answer 1

我不是专业人士，但我知道手机上没有悬停东西吗？

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

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

希望它有所帮助。

CSS悬停效果Bootstrap Thumbnail

1 个答案: