Question

.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和一个元素），但是此悬停效果在移动设备上不起作用，我想通过CSS媒体查询更改此设置，以便h2和一个元素永久显示在图像上，而没有悬停效果。

我该如何实现？

以下是我的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}

非常感谢

Answer 1

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

Detecting a mobile browser

然后将一个类添加到您的元素中，该类将始终显示所需的效果，否则将显示在：hover

上

希望这会有所帮助

更改移动设备的悬停效果

1 个答案: