当一个元素悬停在另一个元素上时，改变它的CSS

Question

我有一个带有白色链接的固定位置导航栏，当他们在另一个具有白色背景的元素上方（＆＃34;悬停＆＃34;）时，我试图让链接变成黑色。

Navbar链接CSS：

nav ul li a {color:#ffffff;}

Navbar CSS：

nav {position:fixed;}

White div CSS：

div.white {background-color:#ffffff;}

想象一下这是HTML：

<nav><ul><li><a>Link</a></li></ul></nav>
<!-- Imagine there's a hero image here -->
<div id="heroimage"></div>
<div class="white">

由于导航栏固定在顶部，当您滚动网站时，导航栏最终会位于顶部（＆＃34;悬停＆＃34;）白色div，链接将变为＆＃34;隐形＆＃34 ;。我试图找到一种方法，只有当它们位于白色div之上时才会变成黑色。

这可以用JQuery吗？我在寻找什么功能？我无法在其他地方找到答案......

Answer 1

好的，看看是否更符合您的要求。你必须滚动才能看到＆＃34; NAVBAR＆＃34;颜色变化。希望这可以帮助。如果您有任何问题，请告诉我。

修改

所以现在我理解你的意思了。

这是另一个小提琴。 https://jsfiddle.net/u96xa39L/2/

<强> HTML：

<div id="colorMeDifferent" class="blackbarwhitelinks">NAVBAR</div>

<div class="hugeDiv">No color change on overlap</div>

<div id="hoveroverme" class="hoverBar">When we over lap here, colors change</div>

<div class="hugeDiv">No color change on overlap</div>

<强> Jquery的/使用Javascript

$(window).scroll(function() {
  var hoverElement = $("#hoveroverme");
  var elementsToChange = $("#colorMeDifferent");


  if ( Math.abs(hoverElement.offset().top - elementsToChange.offset().top)  <= hoverElement.height()) {
    elementsToChange[0].className = "whiteBarBlackLinks";       
  } else {
    elementsToChange[0].className = "blackbarwhitelinks";
  }
});

<强> CSS

#colorMeDifferent {
  position: fixed;
}

.blackbarwhitelinks {
  background-color: black;
  color: white;
}

.whiteBarBlackLinks {
  background-color: white;
  color:black;
}

.hugeDiv {
  min-height: 650px;
  background-color:red;
}

Answer 2

Almond的回答非常有助于作为基础使用。这是最终的结果：

<强> HTML

<nav><ul><li><a id="link">Link</a></li></ul></nav>
<!-- Some more HTML -->
<div id="content"></div>

<强> CSS

#content {background-color:#fff;}
.navwhite {color:#fff;}
.navblack {color:#000;}

<强> JQuery的

$(document).ready(function() {
    $('nav>ul>li>a').addClass("navwhite");
});

$(window).scroll(function() {
    var offsetDiv = $('div#content').offset().top;
    var offsetNav = $('#link').offset().top;

    if (offsetDiv <= offsetNav){
        $('nav>ul>li>a').removeClass("navwhite").addClass("navblack");
    }
    else {
        $('nav>ul>li>a').removeClass("navblack").addClass("navwhite");
    }
});