悬停效果在社交图标上方和下方的所有div

Question

当我将鼠标悬停在社交媒体图标上时，整个列都会在悬停时生效。

我在此代码上面有3个div，而在下面有一个div。他们都受到影响。

.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> 

Answer 1

例如 所有专栏都受到影响

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

所有的div都受到了影响

Answer 2

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

编辑＃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>

Answer 3

您希望悬停仅影响正在悬停的网址，而不影响列表。尝试：

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