当它悬停另一个元素时更改一个元素的CSS

-2

我有一个带有白色链接的固定位置导航栏，我试图在链接变为黑色时（“悬停”）具有白色背景的另一个元素。当它悬停另一个元素时更改一个元素的CSS

导航栏链接CSS：

nav ul li a {color:#ffffff;}

导航栏CSS：

nav {position:fixed;}

白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">

由于导航栏固定在顶部，因此当您滚动网站时，导航栏最终会占据白色区域的顶部（“悬停”），并且链接将变为“不可见”。我试图找到一种方法，让他们只有在白色格子顶部时才变成黑色。

这可能与JQuery？我在寻找什么功能？我在其他地方找不到答案...

来源

2016-11-11 Luiz Cruz

是的，它是可能的。 –

尼斯，罗里，谢谢。你的方法是什么？ –

那么你到目前为止尝试过什么？ SO用于帮助诊断和解决代码中的问题。甚至看到你当前的HTML和CSS将是一个开始 –

好吧，看看这是否更多你要求的。您必须滚动才能看到“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; 
}

来源

2016-11-11 17:51:48 Almond

嗨，杏仁。这很好，除了当用户悬停其他元素时触发该功能。我试图找到一种方法，以便我的导航栏“检测”它在白色div上方，然后触发JQuery函数更改其链接的CSS。 –

啊。我懂了。给我一点时间来编辑我的JS。 – Almond

杏仁，我在猜测函数'className（）'实际上是'toggleClass（）'？ –

杏仁的答案是作为一个基地使用很有帮助。这是最后的结果是：

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

来源

2016-11-11 21:52:16

当它悬停另一个元素时更改一个元素的CSS

回答

相关问题