我有一个图像链接，其中包含:hover具有在鼠标悬停时在图像顶部显示文本的功能，然后单击即可进入新网页。
然而，在移动设备上（仅在 Safari 移动设备上进行过测试），轻按一下即可显示悬停功能，然后轻按一下即可进入该页面。我不想要这个，我可以看到这对下拉菜单有益，但对于我的用例来说，它只会让用户界面更加混乱。
我希望它一键直接进入该页面，这就是正常链接所发生的情况a:hover.
这是我的代码：
.thumb_text {
position: absolute;
top: 0;
left: 2.531645569620253%;
width: 73.83966244725738%;
padding-top: 12px;
z-index: 1;
color: white;
}
.the_line_thumb {
position: relative;
overflow: hidden;
}
.the_line_thumb img {
height: 200px;
width: 500px;
background-color: yellow;
}
.the_line_thumb_text {
display: none;
}
.the_line_thumb:hover img {
filter: brightness(40%);
}
.the_line_thumb:hover .the_line_thumb_text {
display: block;
}
<a href="https://example.com">
<div class="the_line_thumb">
<img src="example.png">
<div class="the_line_thumb_text thumb_text">
<h1>Hello Stack Overflow</h1>
<p>
Hope you're having a great day and thanks for trying to help me out.
</p>
</div>
</div>
</a>
通过 saurabh （在评论中）：这个问题似乎是一个 ios 问题，与无法像桌面一样处理多个 :hover 条目有关。
您可能需要考虑4 级媒体查询 https://www.w3.org/TR/mediaqueries-4/#descdef-media-hover规范允许直接定位支持的设备hover.
@media(hover: hover) and (pointer: fine) {
.the_line_thumb:hover img {
filter: brightness(40%);
}
}
Demo
.thumb_text {
position: absolute;
top: 0;
left: 2.531645569620253%;
width: 73.83966244725738%;
padding-top: 12px;
z-index: 1;
color: white;
}
.the_line_thumb {
position: relative;
overflow: hidden;
}
.the_line_thumb img {
height: 200px;
width: 500px;
background-color: yellow;
}
.the_line_thumb_text {
display: none;
}
.the_line_thumb:hover .the_line_thumb_text {
display: block;
}
.the_line_thumb:hover .plus {
color: #ffbdff;
background-color: white;
}
@media(hover: hover) and (pointer: fine) {
.the_line_thumb:hover img {
filter: brightness(40%);
}
}
<a href="https://example.com">
<div class="the_line_thumb">
<img src="example.png">
<div class="the_line_thumb_text thumb_text">
<h1>Hello Stack Overflow</h1>
<p>
Hope you're having a great day and thanks for trying to help me out.
</p>
</div>
</div>
</a>
Support https://caniuse.com/#feat=css-media-interaction
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
