是否可以实现与此处相同的效果:www.lutmedia.com只需使用 CSS3 和 HTML5 ......而不是 jquery ......?将鼠标悬停在列表项链接上时,正文背景颜色会发生变化..?
问问题
4932 次
1 回答
2
是的,您可以使用纯 CSS 获得类似的效果,但它不会是主体更改背景,而是该菜单中的最后一个列表项,它具有position: fixed
并覆盖整个页面。
快速演示
相关HTML:
<ul class='menu'>
<li><a href='#'>contact</a></li>
<li><a href='#'>blog</a></li>
<!-- and so on, menu items -->
<li class='bg'></li>
</ul>
相关CSS:
.menu li { display: inline-block; }
.menu li:first-child a { color: orange; }
.menu li:nth-child(2) a { color: lime; }
/* and so on for the other menu items */
.menu:hover li a { color: black; }
.menu li a:hover { color: white; }
.bg {
position: fixed;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: dimgrey;
transition: .5s;
pointer-events: none;
}
.menu li:first-child:hover ~ .bg { background: orange; }
.menu li:nth-child(2):hover ~ .bg { background: lime; }
/* and so on for the other menu items */
于 2013-03-02T22:41:45.680 回答