jQuery 悬停在一个 div 上触发另一个 div 的变化

Question

当我将鼠标悬停在文本上时，文本和 css 图标都会按应有的方式触发。

但是，当我将鼠标悬停在 css 图标上时，当图标和文本都应与之前的实例一样时，只会触发 css 图标。

我的 jQuery 有什么问题，它不能双向工作？

http://jsfiddle.net/jaoyebc8/

html

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<span class="twitter-underline-1">Just some filler text</span>

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

CSS

.twitter-underline-1 {
border-bottom: 1px dotted #E0E0E0;
}

.twitter-underline-1:hover {
border-bottom: 1px solid #4099FF;
}

#twitter-1 {
padding-top: 0px;
font-size: 40px;
color: #E0E0E0;
margin-left: 55px;
}

#twitter-1:hover {
color: #4099FF;
}   

jQuery

$(document).ready(function(){
$('.twitter-underline-1').mouseover(function(){
    $('.twitter-underline-1').css('border-bottom: 1px solid', '#4099FF');
    $('#twitter-1').css('color', '#4099FF');
});
$('.twitter-underline-1').mouseout(function(){
    $('.twitter-underline-1').css('border-bottom: 1px dotted', '#E0E0E0');
    $('#twitter-1').css('color', '#E0E0E0');
});
$('#twitter-1').mouseover(function(){
    $('#twitter-1').css('color', '#4099FF');
    $('.twitter-underline-1').css('border-bottom: 1px solid', '#4099FF');
});
$('#twitter-1').mouseout(function(){
    $('#twitter-1').css('color', '#E0E0E0');
    $('.twitter-underline-1').css('border-bottom: 1px dotted', '#E0E0E0');
});
});

Answer 1

通常，您可以仅使用 css 定位任何其他元素(只要目标元素与触发元素处于同一级别或更低级别，您就不能使用 CSS 定位父元素)，如下所示:

#trigger-element:hover #target-element { /* hover effect rules */ }

添加了一些 CSS 规则并删除了更多的 js 行

检查 DEMO

.twitter-underline-1 {
border-bottom: 1px dotted #E0E0E0;
}

.twitter-underline-1.hover,
.twitter-underline-1:hover {
border-bottom: 1px solid #4099FF;
}
.twitter-underline-1:hover ~ .twit-span #twitter-1 {
color: #4099FF;
}

#twitter-1 {
padding-top: 0px;
font-size: 40px;
color: #E0E0E0;
margin-left: 55px;
}

.twit-span:hover #twitter-1 {
color: #4099FF;    
}