单击后悬停状态不起作用

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 文件中的任何设置。我相信这也会覆盖 "hover" 样式。

因此您需要更改这些行：

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

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

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

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

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

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

我以为你想向用户表明最后的选择是什么。听起来你不想要那个，所以你不需要使用我上面包含的 "removeClass"/"addClass" 行。

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

引用它

当前可能的状态：

项目已选中/未悬停
项目选择/悬停
未选择项目/未悬停
项目未选中/悬停

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

单击后悬停状态不起作用

Hover state not working after clicking

javascript

css

hyperlink

hover

contact-form