CODEWITHSUNDEEP
jquerycssscrollhover
Casper T.
Casper T.

Reputation: 64

Targeting a hover element in jquery

I know this is probably a recipe for disaster, but I want to change a css:hover element after scrolling 150 px. I'm already using jQuery to do this, but I don't know how to target the hover element. Any solution?

My code:

$(window).scroll(function() {
   if ( $(window).scrollTop() > 150 ) {
      $('#menu li ul li:hover').css('background', 'rgba(0,0,0,1)';
   } else {
      $('#menu li ul li:hover').css('background', 'rgba(255,255,255,0.3)');
   }
});

Upvotes: 0

Views: 180

Answers (6)

kidwon
kidwon

Reputation: 4524

I would use a class attribute.

.myNewHoverClass:hover{
   background: ..... !important;
}


$('element selector').addClass('myNewHoverClass')

The !important; syntax after the css rule is that it is applied with first priority, you can avoid it if you make your style smarter.

or

    .myHoverClass:hover{
       background: ..... ;
    }
    .myNewHoverClass:hover{
       background: ..... ;
    }

$('element selector').removeClass('myHoverClass').addClass('myNewHoverClass')

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206593

On scroll change the classname. Inside your CSS, setup that class with the desired styling.

jsBin demo

For example:

var $menuLi2 = $('#menu li ul li'); // Cache your selectors

$(window).on("scroll", function() {
   $menuLi2.toggleClass( "winScrolled", $(this).scrollTop() > 150 );
});

CSS:

#menu li ul li:hover{ background: rgba(0,0,0,1); }
#menu li ul li.winScrolled:hover{ background: rgba(255,255,255,0.3) }

Upvotes: 0

Niek Nijland
Niek Nijland

Reputation: 772

You should probably use the jQuery .hover() method. Get a variable in there which changes on scroll :)

$('#menu li ul li').hover( function() {
    /* Code what happens on hover */
}, function() {
    /* Code what happens on stop hover */
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337713

jQuery cannot amend psuedo selectors used in CSS. However, you could use jQuery to add/remove a class from the element and hang the CSS :hover state from that. Try this:

$(window).scroll(function() {
    var method = $(this).scrollTop() > 10 ? 'addClass' : 'removeClass';
    $('#menu li ul li:hover')[method]('scrolled');
});

#menu li ul li:hover {
    background-color: rgba(255, 255, 255, 0.3);
}
#menu li ul li.scrolled:hover {
    background-color: rgba(0, 0, 0, 1);
}

Upvotes: 1

Tim S.
Tim S.

Reputation: 13853

You’re making it too hard on yourself. For styling, use classes.

$(window).on('scroll', function() {
    $('#menu').toggleClass('special', $(window).scrollTop() > 10);
});

Now, the class special is applied on #menu when the user has scrolled at least 10 pixels. That class can be used for styling:

#menu.special li ul li {
    background-color: rgba(255, 255, 255, 0.3);
}

#menu.special li ul li:hover {
    background-color: rgba(0, 0, 0, 1);
}

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

You can't change the style of a pseudo class like that, instead use a class based solution like

$(window).scroll(function () {
    $('#menu').toggleClass('scrolled', $(window).scrollTop() > 10);
});

then

#menu.scrolled li ul li:hover {
    background:rgba(0, 0, 0, 1);
}
#menu li ul li:hover {
    background:rgba(255, 255, 255, 0.3);
}


$(window).scroll(function() {
  $('#menu').toggleClass('scrolled', $(window).scrollTop() > 10);
});
body {
  height: 1000px;
}
#menu.scrolled li ul li:hover {
  background: green;
}
#menu li ul li:hover {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
  <li>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>

Upvotes: 1

Related Questions