当它悬停另一个元素时更改一个元素的CSS
我有一个带有白色链接的固定位置导航栏,我试图在链接变为黑色时(“悬停”)具有白色背景的另一个元素。当它悬停另一个元素时更改一个元素的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?我在寻找什么功能?我在其他地方找不到答案...
好吧,看看这是否更多你要求的。您必须滚动才能看到“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;
}
嗨,杏仁。这很好,除了当用户悬停其他元素时触发该功能。我试图找到一种方法,以便我的导航栏“检测”它在白色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");
}
});
是的,它是可能的。 –
尼斯,罗里,谢谢。你的方法是什么? –
那么你到目前为止尝试过什么? SO用于帮助诊断和解决代码中的问题。甚至看到你当前的HTML和CSS将是一个开始 –