javascript - 单击后悬停状态不起作用

Question

所以我有这个页面https://tricote.net/contact/在左侧只有几个链接的地方，当您单击它们时，它会启动您的邮件应用程序并让您向商店发送电子邮件。

但是，单击其中一个后，单击的链接将关闭悬停状态，其余链接将不会打开悬停状态....

有什么办法可以解决这个问题吗？提前感谢您的时间...!

Answer 1

好的，这是你的问题代码:

    $(".contactbox").each(function() {
        var e;
        return e = this,
        $(e).on("click", function() {
            var t, n;
            return t = $(".contactbox").index(e),
            $(".contactbox").css("background", "#fff"),
            $(e).css("background", "#648d85"),
            n = $(".contactbox").eq(t).data("label"),
            $("#contact_subject").val(n)
        })
    })

本质上，当您使用“.css”时，您是在使用 HTML 元素的“style”属性设置背景颜色。这会覆盖 CSS 文件中设置的任何内容。我相信这也会覆盖“悬停”样式。

因此您需要更改这些行:

$(".contactbox").css("background", "#fff"),
$(e).css("background", "#648d85")

您可以创建一个额外的类来指定“事件”元素样式而不是使用“.css”。这可能看起来像这样:

$(".contactbox").removeClass("activeElement");
$(e).addClass("activeElement");

这样您就可以通过在 CSS 文件中排序来控制什么覆盖什么，或者为“activeElement”类悬停行为提供额外的 css 规则。

编辑1:好的，从您的评论来看，您似乎并不想为用户的最后选择设置样式。因此，只需删除这些行:

$(".contactbox").css("background", "#fff"),
$(e).css("background", "#648d85")

我以为您想向用户表明最后的选择是什么。听起来您不希望这样，因此您不需要使用我在上面包含的“removeClass”/“addClass”行。

希望我能理解你想做什么。如果不是，这里列出了这些元素的可能状态。请添加评论或更新您的问题，说明您希望每个状态组合的样式。我给它编号了，所以你可以按编号引用它

当前可能的状态:

1. 已选择/未悬停的元素
2. 元素选择/悬停
3. 元素未选中/未悬停
4. 元素未选中/悬停

根据此编辑中的建议 (State-1 === State-3) 和 (State-2 === State-4)。