更改移动设备的悬停效果答案

【问题标题】：Change hover effect for mobile devices更改移动设备的悬停效果
【发布时间】：2018-11-02 18:28:40
【问题描述】：

.hovereffect a.info,.hovereffect h2{text-transform:uppercase;color:#fff}
.hovereffect{float:left;position:relative;cursor:default}
.hovereffect .overlay{position:absolute;top:0;left:0;opacity:0;background-color:none;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.hovereffect img{display:block;width:100%;height:250px;position:relative;-webkit-transition:all .4s linear;transition:all .4s linear}
.hovereffect h2{position:relative;font-size:17px;background:#DF691A;-webkit-transform:translatey(-100px);-ms-transform:translatey(-100px);transform:translatey(-100px);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;padding:10px}
.hovereffect a.info, .hovereffect:active a.info{text-decoration:none;display:inline-block;border:1px solid #fff;background-color:#DF691A;opacity:0;filter:alpha(opacity=0);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;margin:80px 0 0;padding:7px 14px}

<div class="col-md-4">
  <div class="thumbnail">
    <div class="hovereffect">
      <img src="./images/javascriptcalculator.png" alt="javascript calculator">
      <div class="overlay">
        <h2>React Calculator</h2>
        <a class="info" href="https://codepen.io/azambadar/pen/GBzOzN" target="_blank">Demo Here</a>
      </div>
    </div>
  </div>
</div>

我正在使用引导程序并且有一个由指针触发的带有悬停效果的图像，当光标出现在图像上时会出现悬停效果（h2 和 a 元素），但是这种悬停效果在移动设备上不起作用，我想通过 CSS 媒体查询更改此设置，使 h2 和 a 元素永久显示在图像上，而不会产生悬停效果。

我怎样才能做到这一点？

以下是我的 html 和 css 代码，请检查并告诉我是否可行。

<div class="col-md-4">
  <div class="thumbnail">
    <div class="hovereffect">
      <img src="./images/javascriptcalculator.png" alt="javascript calculator">
      <div class="overlay">
        <h2>React Calculator</h2>
        <a class="info" href="https://codepen.io/azambadar/pen/GBzOzN" target="_blank">Demo Here</a>
      </div>
    </div>
  </div>
</div>

这里是 CSS 部分

.hovereffect a.info,.hovereffect h2{text-transform:uppercase;color:#fff}
.hovereffect{float:left;position:relative;cursor:default}
.hovereffect .overlay{position:absolute;top:0;left:0;opacity:0;background-color:none;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.hovereffect img{display:block;width:100%;height:250px;position:relative;-webkit-transition:all .4s linear;transition:all .4s linear}
.hovereffect h2{position:relative;font-size:17px;background:#DF691A;-webkit-transform:translatey(-100px);-ms-transform:translatey(-100px);transform:translatey(-100px);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;padding:10px}
.hovereffect a.info, .hovereffect:active a.info{text-decoration:none;display:inline-block;border:1px solid #fff;background-color:#DF691A;opacity:0;filter:alpha(opacity=0);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;margin:80px 0 0;padding:7px 14px}

非常感谢

【问题讨论】：

Interaction Media Features 可能会有所帮助并检查browser support。

标签： html css responsive-design bootstrap-4

【解决方案1】：

我认为您可以检测用户是否正在使用基于触摸的设备，例如使用此处提到的功能：

Detecting a mobile browser

然后向您的元素添加一个类，该类始终显示所需的效果，否则显示在 :hover 上

希望对你有帮助

【讨论】：