我正在做一个单页的网站设计,但我如何定义我在里面的 div?
例如...我有一个带有图标的导航菜单,当我在<div id="contact"></div>
导航菜单中的联系人图标内时,将不透明度从 1 更改为 0.5
我怎么做?希望你明白我的意思。
我正在做一个单页的网站设计,但我如何定义我在里面的 div?
例如...我有一个带有图标的导航菜单,当我在<div id="contact"></div>
导航菜单中的联系人图标内时,将不透明度从 1 更改为 0.5
我怎么做?希望你明白我的意思。
必须有一个ID与您的图标所在的DIV相关联。像这样:
<div id="contact" class="class-div">
<img id="img1" class="class-img" src="some-source" />
</div>
因此,基本上,当您将鼠标悬停在该特定DIV上时,您调用 DIV 的ID并更改样式。像这样:
#contact {
opacity: 0.5;
}
如果您想在将鼠标悬停在图像上时选择父 ID,则需要使用某种 JavaScript 代码或简单的导入 jQuery 插件并使用 jQuery 选择器更改样式。像这样:
$('#img1').hover(function() {
$(this).parents('div#contact').css({ 'opacity': '0.5' });
});
我想我知道您的意思,我为您制作了一个 jsFiddle,您可以在其中看到我是如何做到的。我使用 jQuery 来检查您向下滚动了多少,并将其与 div 到页面顶部的距离进行了比较。
http://jsfiddle.net/Denocle/QBf59/2/
假设您的 HTML 如下所示:
<div id="menu">
<div id="menu-hello"><a href="#hello">Hello</a></div>
<div id="menu-about"><a href="#about">About</a></div>
<div id="menu-contact"><a href="#contact">Contact</a></div>
</div>
<div class="big" id="hello">
<h1>Hello</h1>
Text
</div>
<div class="big" id="about">
<h1>About</h1>
Text
</div>
<div class="big" id="contact">
<h1>Contact</h1>
Text
</div>
然后我们有一些像这样的jQuery:
$(window).scroll(function() {
$('.big').each( function(i){
var top_of_object = $(this).position().top;
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var top_of_window = $(window).scrollTop();
var id = $(this).attr('id');
if (top_of_window >= top_of_object && top_of_window <= bottom_of_object) {
$('#menu-'+id).css({'opacity':'0.5'});
} else {
$('#menu-'+id).css({'opacity':'1'});
}
});
});
这将确定浏览器窗口的顶部是否在具有“big”类的 div 之一内,然后更改菜单中具有“menu-”前缀的 div 的不透明度。
我重用了这个线程的一些代码: https ://stackoverflow.com/a/9099127/1713635