ある要素が他の要素をホバリングしているときにCSSを変更する

Question

私は白いリンクを持つ固定位置のnavbarを持っていて、別の要素が白い背景の上にあるときにリンクを黒に変えようとしています。

ナビゲーションバーのリンクのCSS：

nav ul li a {color:#ffffff;} 

ナビゲーションバーのCSS：

nav {position:fixed;} 

ホワイトのdiv CSS：

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

：

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

が、これはHTMLで想像

navbarは上部に固定されているので、ウェブサイトをスクロールすると、navbarは最終的に白いdivの上に乗ってリンクが「見えなくなる」ようになります。私は彼らが白いdivの上にいるときだけ、黒になるようにする方法を見つけようとしています。

これはJQueryで可能ですか？どんな機能を探していますか？私は答えを他の場所で見つけることができませんでした...

Answer 1

さて、あなたが求めていたものがもっとあるかどうかを見てください。 「NAVBAR」の色の変化を見るためにスクロールする必要があります。お役に立てれば。ご質問がある場合はお知らせください。

編集：

だから今、私はあなたが何を意味するのか理解していること。

別のフィドルがあります。 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

アーモンドの答えは、ベースとして使うのに大いに役立っていました。

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