无法让悬停事件使用 jQuery UI 持续时间参数或 CSS 处理目标元素的同级元素

can't get a hover event to work on a sibling of a target element using jquery ui duration paramater or CSS

本文关键字：元素 处理 CSS 目标 参数 持续时间 悬停 事件 UI jQuery      更新时间：2023-09-26

我的目标是更改元素及其兄弟姐妹之一的背景颜色，该颜色在 DOM 中较高，但在悬停时位于同一父级中。我能够使用 css 过渡来更改第一个元素，但我无法让兄弟姐妹更改。所以我研究了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 {

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

基本上，我希望具有.title类背景和.circletag背景的div在悬停.circletag时淡入淡出。斯菲德尔

谢谢你们的帮助。

像这样尝试：

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

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

试试这个，

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

如果你引用一个类，你需要在你的find((中使用".title"。

小提琴

希望这有帮助。

相关文章：