javascript - 无法使用 jquery ui 持续时间参数或 CSS 让悬停事件在目标元素的兄弟元素上工作

Question

我的目标是在悬停时更改元素及其在 DOM 中较高但在同一父元素中的兄弟元素之一的背景颜色。我能够使用 css transition 来更改第一个元素，但我无法让 sibling 进行更改。所以我调查了jquery UI addClass effect

我希望下面的代码能够工作，因为我无法让 css 解决方案工作，目标是在悬停时更改两个元素

$(document).ready(function(){
        $('.circletag').hover(function() {
             $(this).addClass( "red");
             $(this).parent().find('title').addClass('red', 2000);
        }, function() {
            $(this).removeClass('red', 5000);
            $(this).parent().find('title').removeClass('red', 2000);
        });
})

我能够在 $(this) 元素上获得淡入淡出效果，但 .title元素根本没有显示任何变化。

当.circletag徘徊我想要.circletag要更改的背景和 .title背景在 2 秒间隔内同时变化。如果它不能用 css 完成，这是我更喜欢的解决方案，我会很感激 jquery 的解决方案。

我也很想知道为什么控制台说

SyntaxError: syntax error

    .ui-helper-hidden {

当我使用 jquery ui 时，为什么持续时间在此 addClass 函数中不起作用？对我来说太奇怪了。 为什么当鼠标离开元素时不需要 5 秒来删除类？看起来是 css 过渡规则在发号施令。

基本上我想要类为 .title 的 div的背景和.circletag悬停在 .circletag 上时淡入淡出的背景. <强> jsfiddle

谢谢大家的帮助。

Answer 1

像这样尝试:

$(document).ready(function(event){
    $('.circletag').hover(function() {
         $(this).addClass( "red");
         $(this).parent().find('.title').addClass('red', 2000);
    }, function() {
        $(this).removeClass('red', 5000);
        $(this).parent().find('.title').removeClass('red', 2000);
    });
 })

您需要在“查找”函数中指定类选择器。 让我知道:)