如何让鼠标悬停在移动设备上工作?在移动设备上，我想什么是显示在桌面上悬停自动显示

Question

我想使用@media (hover: hover)，但我不能让它工作。我在一行中有三个图像，当它们用鼠标悬停在上面时显示文本覆盖。目前，每当我添加@media (hover: hover)并切换到移动视图时，图像都保持不变。我要么想让@media (hover: hover)工作，要么完全尝试其他东西。这是我第一次设计一个网站，使用堆栈溢出，所以我有点超出我的深度。我没有看到任何已经张贴的问题与我的问题足够相似，以帮助我实现我的目标。我的CSS如下:

.card-container
{
margin-top: 10%;
}
.card-container h1
{
font-family: merriweather;
}
.card
{
position: relative;
overflow: hidden;
}
.card:before
{
position: absolute;
content: '';
width: 80%;
height: 220%;
background: rgba(217, 153, 35, 0.7);
top: -50%;
left: -100%;
z-index: 1;
transform: rotate(25deg);
transform-origin: center top 0;
transition: .5s;
}
.card:hover:before
{
left: 10%;
}
.card img
{
width: 100%;
height: auto;
}
.card-text
{
width: 100%;
padding: 0 20px;
position: absolute;
top: -100%;
color: #ffff;
left: 0;
z-index: 2;
transition: 1.1s;
}
.card-text h3
{
font-family: merriweather;
font-weight: 900;
}
.card-text h5
{
font-family: lora;
}
.card:hover .card-text
{
top: 80px;
}

Answer 1

在移动端，您需要hover的组合积极和悬停元素。

所以，你需要在css中声明。

.card:hover, .card:active{
//your hover effect.
}

Answer 2

你只需要在响应式媒体查询中使用组合CSS选择器属性

。- .class:hover， .class:active， .class: focus

请参考此链接进行现场演示以了解详细信息。https://jsfiddle.net/yudizsolutions/nc2fh7kp/

ol,
ul {
list-style: none;
}
li {
display: inline-block;
padding: 20px 0 20px;
vertical-align: middle;
}
a:hover,
a:focus,
a:active {
color: #999;
text-decoration: none;
}
a {
text-decoration: none;
transition: color 0.1s, background-color 0.1s;
position: relative;
display: block;
padding: 16px 0;
margin: 0 12px;
letter-spacing: 1px;
font-size: 12px;
line-height: 16px;
font-weight: 900;
text-transform: uppercase;
transition: color 0.1s, background-color 0.1s, padding 0.2s ease-in;
color: #000;
}
a::before {
content: '';
display: block;
position: absolute;
bottom: 3px;
left: 0;
height: 3px;
width: 100%;
background-color: #000;
transform-origin: right top;
transform: scale(0, 1);
transition: color 0.1s, transform 0.2s ease-out;
}
a:active::before {
background-color: #000;
}
a:hover::before,
a:focus::before {
transform-origin: left top;
transform: scale(1, 1);
}

<nav>
<ul>
<li class="item"><a href="#">link 1</a></li>
<li class="item"><a href="#">link 2</a></li>
<li class="item"><a href="#">link 3</a></li>
<li class="item"><a href="#">link 4</a></li>
<li class="item"><a href="#">link 5</a></li>
</ul>
</nav>