悬停影响社交图标上方和下方的所有 div答案

【问题标题】：Hover effects all div above and under social icons悬停影响社交图标上方和下方的所有 div
【发布时间】：2017-03-01 21:12:29
【问题描述】：

当我将鼠标悬停在社交媒体图标上时，整个列都会受到悬停的影响。

我在此代码上方有 3 个 div，在下方有 1 个。都生效了。

.social-media-Urban {background-color:yellow;}
.social-media-Urban ul li a {
    display: block;
    width: 61px;
    height: 66px;
}
.social-media-Urban ul li:hover {
    top: -3px;
    opacity: 0.7;

.facebook_urban {
    background: url('i.imgur.com/rjoSuNv.png');
    background-position: top -2px left 134px;
}
.twitter_urban {
    background: url('i.imgur.com/rjoSuNv.png');
    background-position: top -2px left -8px;
}
.instagram_urban {
    background: url('http://i.imgur.com/rjoSuNv.png');
    background-position: top -2px left 67px;
}

<div class="social-media-Urban">
 <ul>
  <li class="facebook_urban"><a href="https://www.facebook.com/"></a></li>
  <li class="twitter_urban"><a href="https://twitter.com/"></a></li>
  <li class="instagram_urban"><a href="https://www.instagram.com/"></a></li>
 </ul>
</div>

【问题讨论】：

那么您的确切问题是什么？这个场景有什么问题？
所有列都会生效
徽标

一些文字
链接
悬停效果和社交图标

右复制
我不知道你想要完成什么。有什么问题，你想要什么结果？你的问题很不清楚！
你的css括号没有关闭：.social-media-Urban ul li:hover { top: -3px; opacity: 0.7;.

标签： html css hover

【解决方案1】：

例如所有列都会生效

<div>Logo</div>
<div>Some text</div>
<a>links</a>
<div> HOVER EFFECTS AND SOCIAL ICONS</DIV>
<div>COPY RIGHT</div>

所有的div都生效了

【讨论】：

【解决方案2】：

您希望悬停只影响被悬停的 URL，而不是列表。试试：

.social-media-Urban ul li a:hover {
   top: -3px;
   opacity: 0.7;
}

【讨论】：

【解决方案3】：

我不明白这里有什么问题，但我已经为你清理了你的代码——你错过了一些语法：

编辑 #1： 悬停效果影响所有列表的原因是您忘记关闭 .social-media-Urban ul li:hover 的样式。

.social-media-Urban {
  background-color: yellow;
}

.social-media-Urban ul li a {
  display: block;
  width: 61px;
  height: 66px;
  overflow: hidden;
}

.social-media-Urban ul li a:hover {
  top: -3px;
  opacity: 0.7;
}

.facebook_urban a {
  background: url('http://i.imgur.com/rjoSuNv.png');
  background-position: top -2px left 134px;
}

.twitter_urban a {
  background: url('http://i.imgur.com/rjoSuNv.png');
  background-position: top -2px left -8px;
}

.instagram_urban a {
  background: url('http://i.imgur.com/rjoSuNv.png');
  background-position: top -2px left 67px;
}

<div class="social-media-Urban">
  <ul>
    <li class="facebook_urban">
      <a href="https://www.facebook.com/"></a>
    </li>
    <li class="twitter_urban">
      <a href="https://twitter.com/"></a>
    </li>
    <li class="instagram_urban">
      <a href="https://www.instagram.com/"></a>
    </li>
  </ul>
</div>

【讨论】：

哦，它关闭了，我只是在复制粘贴过程中忘记了这一点
我已经更新了代码；这可能就是你想要的样子？