0

I have a page on which the menu background-color is XYZ on the front page. On any subsequent (due to the nav background changing on sub-pages) page the NAV background color changes so that I will also have to change the background-color for the nav items themselves. Here is an example:

.nav__menu {
  ul {
    display: flex;

    li {
      padding: 3px;

      &:hover {
        background-color: rgba(0, 0, 0, 0.3);
      }
    }
  }
}

So far, so good. This SCSS will set the standard background-color for the front page. Once switching to other sites, I have opted to change the color dynamically via JS:

$(document).ready(() => {
  const path = window.location.pathname;
  const root_path = path.substring(path.lastIndexOf("/"));

  if (path !== root_path) {
    $(".nav__menu ul li a").css("color", "#0c9594");
    $(".nav__menu ul li").hover(
      e => {
        const el = $(e.target);

        if (el[0].nodeName == "LI") {
          $(el).css("background-color", "rgba(0, 0, 0, 0.1)");
        }
      },
      e => {
        const el = $(e.target);
        if (el[0].nodeName == "LI") {
          $(el).css("background-color", "transparent");
        }
      }
    );
  } else {
    $(".nav__menu ul li a").css("color", "#f9f6ef");
  }

Within the jQuery hover method I have to specify e.target because this refers to the window object. Also, since the LI has an anchor tag inside of it, I have to check that the CSS are applied to the right elements by using [0].

This behavior is extremely faulty, in that it sometimes doesn't remove the applied background-color.

Please help me make this work as intended, hover in applying the color, hover out removing it.

Here is a CodePen

Hewe
  • 159
  • 1
  • 12
  • Wrong hover. It is deprecated – mplungjan Jul 10 '19 at 16:37
  • 1
    I would have a class on the `` tag that's different on the subsequent pages and do this with CSS. – James Long Jul 10 '19 at 16:38
  • Try using an anonymous inline function instead of an arrow arrow - then `this` will be what it should be – freedomn-m Jul 10 '19 at 16:43
  • 1
    `$(".nav__menu ul li").on({ mouseenter: function(){ $(this).css("background-color", "rgba(0, 0, 0, 0.1)") }, mouseleave: function(){ $(this).css("background-color", "transparent"); } });` – mplungjan Jul 10 '19 at 16:43
  • @mplungjan https://api.jquery.com/hover/#hover1 It's deprecated? – Taplar Jul 10 '19 at 16:45
  • @mplungjan I'm a little confused - OP isn't using `.on("hover")` and there's no deprecation notice on https://api.jquery.com/hover/ – freedomn-m Jul 10 '19 at 16:45
  • Interesting https://github.com/jquery/jquery/issues/3214#issuecomment-398663964 – mplungjan Jul 10 '19 at 16:48
  • This code is smelly though. You're sticking the `e.target` in a jQuery object, and then later using `el[0]` to break it out of the jQuery object to access the Element properties directly. That makes putting it in the jQuery object pointless. Edit: `$(el)` is also pointless. `el` is already a jQuery object – Taplar Jul 10 '19 at 16:48
  • 1
    https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-jqueryfnhover-is-deprecated – mplungjan Jul 10 '19 at 16:49
  • Codepen has a simple typo that fixes it: `if (el.nodeName == "LI") {` to `if (e.target.nodeName == "LI") {` (or match the mouseenter part) – freedomn-m Jul 10 '19 at 16:49
  • @mplungjan very interesting. thanks for the links – Taplar Jul 10 '19 at 16:51
  • @Taplar I also think the code I posted is much more elegant than that hack OP made to blindly force ES6 arrow instead of function – mplungjan Jul 10 '19 at 16:52
  • Yes, using arrow function here is not a good idea(tm). But could still use `.hover(function() {}, function() {})` – freedomn-m Jul 10 '19 at 16:53
  • @mplungjan quite possible, yet they still could benefit from learning where they have coding reflexes that are not subjectively "good" – Taplar Jul 10 '19 at 16:53
  • **NB:** The code pasted here is *different* from the code in the pen - the code here works, the pen does not. – freedomn-m Jul 10 '19 at 16:53

0 Answers0