Question

我在移动设备上打开时正好显示这些悬停徽标的问题。不确定如何使这些正确响应。我认为设置徽标的margin: 0 auto;可以解决这个问题，但我猜不是。

任何帮助都将非常感谢!!

（顺便说一下，我已经将图像更改为汉堡王了）

.logo {
  width: 180px;
  padding: 20px;
  margin: 0 auto;
  position: relative;
  display: block;
}

.logo__image {
  width: 100%;
  transition: transform .5s;
  height: auto;
}

.logo__text {
  color: #627562;
  font-size: .9em;
  font-weight: bold;
  font-family: Arial;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .5s;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.logo .img-responsive {
    margin: 0 auto;
}

.logo:hover .logo__image {
  transform: translateY(-20px);
}

.logo:hover .logo__text {
  opacity: 1;
}

.test_p__text {
  color: #636059;
  font-size: 32px;
  font-weight: normal;
  font-family: Arial;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .5s;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.test_p:hover .test_p__image {
  transform: translateY(-50px);
}

.test_p:hover .test_p__text {
  opacity: 1;
}

<div class="logo">
  <img class="logo__image" src="https://i.imgur.com/l2DkgFN.png" />
  <span class="logo__text">Providing Industry Wide Solutions</span>
</div>

Answer 1

您忘记了元标记。将其添加到您的<head>代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This是没有元标记的样子。

And this是带元标记的方式。

Answer 2

伙计们抱歉你不能在移动设备上悬停在移动设备上没有光标，除非你有鼠标连接到你的手机悬停在移动设备上不起作用

创建响应式悬停CSS徽标

2 个答案: