Hirohito Yamada Hirohito Yamada - 12 days ago 5
Javascript Question

Hover state not working after clicking

so I have this page https://tricote.net/contact/
Where you have few links on the left and when you click them, it launches your mail app and let you send emails to the shop.

However, after clicking one of them, clicked links hover state on turn off and rest of the links won't turn on the hover state....

Is there any way to fix this..?
Thank you for you time in advance...!

Answer

Ok so this is your problem code:

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

Essentially you are setting the background color using the "style" attribute of the HTML element when you use ".css". This overrides anything set in the CSS file. I believe this also overrides the "hover" styling.

So you will want to change these lines:

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

You could create an additional class that specifies that "active" element styling instead of using ".css". This could look like this:

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

This way you can control what overrides what through ordering in the CSS file or provide an additional css rule for the "activeElement" class hover behavior.

EDIT1: Ok so from your comment is sounds like you don't really want to style the user's last selection. So instead just remove these lines:

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

I had thought you wanted to indicate to the user what the last selection was. It sounds like you don't want that so you don't need use the "removeClass"/"addClass" lines I included above.

Hopefully I am understanding what you want to do. If not here is a list of possible states for these elements. Please add a comment or update your question indicating how you want each state combination styled. I numbered it so you can reference it by number

Current Possible States:

  1. Item Selected / Not Hovering
  2. Item Selected / Hovering
  3. Item Not Selected / Not Hovering
  4. Item Not Selected / Hovering

With the recommendations in this edit (State-1 === State-3) and (State-2 === State-4).

Comments