Question

当我将鼠标悬停在文本上时，文本和css图标都会按原样触发。

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

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

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;    
}

Answer 2

css中存在语法错误。看看这个：DEMO

$(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 solid #E0E0E0');
    });
});

Answer 3

为什么不尝试使用toggleClass和hover添加课程：

$('.twitter-underline-1').hover(function(){
    $(this).toggleClass("hover");
    $('#twitter-1').toggleClass("hover");
});

$('#twitter-1').hover(function(){
    $(this).toggleClass("hover");
    $('.twitter-underline-1').toggleClass("hover");
});

更改您的CSS以使用.hover类：

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

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

JSFiddle Example

jQuery悬停在一个div上以触发另一个div的更改

3 个答案: