My objective is to alter the background color of an element and one of its higher siblings in the DOM but within the same parent upon hover. While I successfully used CSS transition to change the first element, I encountered difficulty getting the sibling to change as well. This led me to explore jQuery UI addClass effect.
I hoped that the following code would achieve the desired outcome since my attempts with CSS were unsuccessful. The aim was to modify 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);
});
})
Although I managed to create a fade effect on the .circletag elements, the .title element did not exhibit any changes.
During hover of .circletag, I wish for the background of both .circletag and .title to change simultaneously over a 2-second period. If achieving this through CSS, which is my preferred method, is not possible, then I would appreciate a jQuery solution.
I am also curious about why the console is displaying:
SyntaxError: syntax error
.ui-helper-hidden {
Why does the duration not work with the addClass function when using jQuery UI? It's perplexing to me. Additionally, why does removing the class upon mouse exit not take 5 seconds as intended? It appears that the CSS transition rule is dictating the behavior.
In essence, I desire the background of the div with the class .title and .circletag to smoothly fade in and out during hover of .circletag.
View jsfiddle here
Thank you for your assistance.