无法使用jquery ui持续时间参数或CSS使悬停事件对目标元素的同级对象起作用

Question

My goal is to change the background color of an element and one of its siblings that is higher in the DOM but in the same parent on hover. I was able to use css transition to change the first element but i couldn't get the sibling to change. so I looked into jquery UI addClass effect

I wanted the code below to work since I couldn't get a css solution to work, the goal was to change both elements on hover

$(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);
        });
})

I was able to get a fade effect on the $(this) elements but the .title element is not showing any changes at all.

when .circletag is hovered I would like .circletag backgroud to change and the .title background to change at the same time over a 2 second interval. If It cant be done with css which is the way I would prefer the solution I would appreciate a jquery one.

Also I'm curios to know why the console says

SyntaxError: syntax error

    .ui-helper-hidden {

Why does the duration not work in this addClass function when im using jquery ui? So weird for me. why is it that when the mouse is moves off the element it does not take 5 seconds to remove the class? it looks like the css transition rule is calling the shots.

basically I want the div with the class of .title 's backgound and .circletag background to fade in and out on hover of .circletag . jsfiddle

Thanks for your help guys.

Answer 1

Try it like this:

$(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);
    });
 })

You need to specify the class selector in 'find' function.. Let me know :)

Answer 2

Try this,

$(this).parent().find('.title').addClass('red', 2000);

you need to use ".title" inside your find() if you are referring a class.

Fiddle

Hope this helps.