html - 鼠标悬停触发悬停在自身和另一个 div 上

Question

我正在尝试设置一些东西，当有人将鼠标悬停在 .twitter-underline-1 上时，它会触发该类的 :hover 和 :hover 为 #twitter-1 id

副诗

当有人将鼠标悬停在 #twitter-1 上时，它会触发该 ID 的 :hover 和 的 :hover。 twitter-underline-1 类

我尝试了其他提出类似问题的人推荐的一些解决方案，但没有完全奏效。谁能指出我正确的方向？

.twitter-underline-1 {
  border-bottom: 1px dotted #E0E0E0;
}
.twitter-underline-1:hover {
  border-bottom: 1px solid #4099FF;
}
#twitter-1 {
  padding-top: 402px;
  font-size: 40px;
  color: #E0E0E0;
  margin-left: 45px;
}
#twitter-1:hover {
  color: #4099FF;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<span class="twitter-underline-1">Blah blah text</span>

<div class="twitter">
  <span title="Click to Tweet"><i id="twitter-1" class="fa fa-twitter"></i></span>
</div>

Answer 1

演示 - http://jsfiddle.net/3855n719/

$('#twitter-1').hover(
  function() {
    $('.twitter-underline-1').addClass('hover');
  },
  function() {
    $('.twitter-underline-1').removeClass('hover');
  }
);