Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Override :hover on elements under pseudo element

Override :hover on elements under pseudo element

Problem

In our menu, I have a parent menu item and its children turn orange on :hover. I am also using JS to add a toggle to a collapse/expand menu, but since the span element is positioned on top of the parent list item, hovering on the toggle triggers the color change. I am trying to figure out a way (either with Compass or jQuery) to override the hover style on the list if the toggle is hovered on.

We're using Drupal, so the HTML is quite convoluted, but here's a pared down version:


Here's the jQuery:

jQuery(document).ready(function(){
      $(".not-front .menu__item.is-expanded.last.expanded span").after(" ");
      $(".front .menu__item.is-expanded.last.expanded span").after(" ");
      $("#block-menu-block-1 ul li li").css({ display: "block" });
      $(".not-front #block-menu-block-1 ul li li").css({ display: "none" });
      $('#block-menu-block-1 .menu__link.nolink').click(function(){
        $('#block-menu-block-1 ul li li').toggle('fast');
        $( ".menu__item.is-expanded.last.expanded span.menu__link.nolink.expand" ).toggleClass( "collapse" );
      });
 });

And here's the Sass:

.menu__item:hover a,
.menu__item:hover span {
  color: $orange;
}

Edit: Sorry! I wanted to post a Sassmeister earlier, but their site was down. Had a link to the dev site, but removed once answered.

Edit: I thought something like this would work, but it's not:

jQuery(".menu__item span.expand").mouseover(function(e) {
        jQuery("menu__item:hover a, .menu__item:hover span").toggleClass( "stay-gray" );

});

along with this is the sass:

.menu__item:hover a,
.menu__item:hover span {
  color: $orange;
  border-color: $orange;
  &.stay-gray {
    color: $darkGray;
    border-color: $darkGray;
  }
}
Problem courtesy of: Beatrice

Solution

Maybe you could try stop propagating the event on the span.expand elements:

$("span.expand").mouseover(function(e) {
    e.stopPropagation();
});

EDIT: stopPropagating didn't work. So, retaking the idea proposed by the OP, we figured out this solution:

Add two new CSS rules:

.stay-gray a.menu__link {
  border-bottom-color: #474E51 !important;
}
.stay-gray, .stay-gray a.menu__link {
  color: #474E51 !important;
}

And then add this lines at the end of the jQuery(document).ready(function(){ ...:

toggleStayGray=function(e){ jQuery(e.target).siblings().toggleClass('stay-gray') };
jQuery('.menu span.expand').mouseover(toggleStayGray).mouseout(toggleStayGray);

This way:

jQuery(document).ready(function(){
  jQuery(".not-front .menu__item.is-expanded.last.expanded span").after(" ");
  jQuery(".front .menu__item.is-expanded.last.expanded span").after(" ");
  jQuery("#block-menu-block-1 ul li li").css({ display: "block" });
  jQuery(".not-front #block-menu-block-1 ul li li").css({ display: "none" });
  jQuery('#block-menu-block-1 .menu__item.is-expanded').click(function(){
      jQuery('#block-menu-block-1 ul li li').toggle('fast');
      jQuery( ".menu__item.is-expanded.last.expanded span.menu__link.nolink.expand" ).toggleClass( "collapse" );
  });
  toggleStayGray=function(e){ jQuery(e.target).siblings().toggleClass('stay-gray') };
  jQuery('.menu span.expand').mouseover(toggleStayGray).mouseout(toggleStayGray);
});

This way, when you hover over the span.expand element, the stay-gray class is toggled on at its siblings, and the new styles are applied on them and its a.menu__link descendants. When the mouse is out, the stay-gray class is toggled off.

Solution courtesy of: Guillermo Gutiérrez

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Override :hover on elements under pseudo element

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×