创建响应悬停 CSS 徽标答案

【问题标题】：Creating Responsive Hover CSS Logo创建响应悬停 CSS 徽标
【发布时间】：2017-10-09 06:07:15
【问题描述】：

我在移动设备上打开这些悬停徽标时遇到问题。不知道如何使这些正确响应。我认为设置徽标的 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>

【问题讨论】：

我认为您错过了视口元标记。你能确认一下吗？

标签： html css mobile responsive-design responsive

【解决方案1】：

您忘记了元标记。将此添加到您的 <head> 标签：

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

This 是没有元标记的样子。

And this 是带有元标记的外观。

【讨论】：

嘿，Ahs N，为响应欢呼。我现在就试试吧！您为示例提供的链接我认为已失效。
@Moods762你是对的，链接失效了。我现在已经更新了它们 :) 希望它们现在可以工作