定位 jquery 中的悬停元素

Question

我知道这可能会导致灾难，但我想在滚动 150 像素后更改 css:hover 元素。我已经在使用 jQuery 来执行此操作，但我不知道如何定位悬停元素。有什么解决办法吗？

我的代码：

$(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)');
   }
});

Answer 1

滚动时更改 class名称。在您的 CSS 中，使用所需的样式设置 class。

jsBin demo

例如：

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) }

Answer 2

您不能像那样更改伪 class 的样式，而是使用像

这样基于 class 的解决方案

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

然后

#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>

Answer 3

你太难为自己了。对于样式，请使用 classes.

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

现在，当用户滚动至少 10 个像素时，class special 将应用于 #menu。 class 可用于样式化：

#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);
}

Answer 4

jQuery 无法修改 CSS 中使用的伪选择器。但是，您可以使用 jQuery 到 add/remove 元素中的 class 并从中挂起 CSS :hover 状态。试试这个：

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

Answer 5

我会使用 class 属性。

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


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

css规则之后的!important;语法是优先应用的，如果你的风格更聪明，就可以避免它。

或

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

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

Answer 6

您可能应该使用 jQuery .hover() 方法。在其中获取一个随滚动而变化的变量:)

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

定位 jquery 中的悬停元素

Targeting a hover element in jquery

css

jquery

scroll

hover