移动端hover效果实现求助：如何让桌面hover内容自动显示？

方法1：用媒体查询针对无hover能力的设备 #

你之前用的@media (hover: hover)是匹配支持鼠标hover的设备（比如桌面端），和你的需求完全相反。要让移动端这类无hover能力的设备自动展示hover状态内容，应该用@media (hover: none)，直接给移动端应用hover时的样式：

在现有CSS末尾添加以下代码块：

/* 针对不支持hover的设备（如移动端），自动展示覆盖层和文本 */
@media (hover: none) {
  .card:before {
    left: 10%;
  }
  .card-text {
    top: 80px;
  }
}

方法2：兼容旧浏览器的屏幕宽度查询 #

如果担心hover: none的兼容性，可以用传统的屏幕宽度媒体查询（比如针对小于768px的设备）：

/* 针对小屏幕移动端设备 */
@media (max-width: 768px) {
  .card:before {
    left: 10%;
  }
  .card-text {
    top: 80px;
  }
}

完整修改后的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;
}

/* 新增：移动端自动展示hover内容 */
@media (hover: none) {
  .card:before {
    left: 10%;
  }
  .card-text {
    top: 80px;
  }
}

/* 可选：兼容旧浏览器的屏幕宽度查询，取消注释即可使用 */
/* @media (max-width: 768px) {
  .card:before {
    left: 10%;
  }
  .card-text {
    top: 80px;
  }
} */

额外说明 #

• @media (hover: none)会精准匹配所有无法通过鼠标hover交互的设备，包括触屏手机、平板等，比固定宽度的查询更贴合设备特性。
• 如果希望移动端点击后切换显示状态（而非一直展示），可以用JavaScript监听click事件，给.card添加/移除.active类，然后在CSS中给.card.active应用hover时的样式。

内容的提问来源于stack exchange，提问作者Beks Parker