仅使用CSS无法完成,假设CSS没有方法可以向上遍历元素树。因此,您无法从子元素返回到父元素,然后再返回到父元素的同级。
涉及JavaScript / jQuery时,可以实现。
这里是一个快速而简短的示例,展示了如何使用jQuery实现。
JS:
$( '#nav a' ).on( 'mouseenter mouseleave', function() {
var that = $(this);
var target = '#' + that.data('target');
that.toggleClass('active');
$('#sectionTeaser').toggle().find(target).toggle();
});
HTML:
<div id="header">
<ul id="nav">
<li><a href="#" data-target="techSection">Tech</a></li>
<li><a href="#" data-target="financeSection">Finance</a></li>
<li><a href="#" data-target="politicsSection">Politics</a></li>
<li><a href="#" data-target="strategySection">Strategy</a></li>
</ul>
<div id="sectionTeaser">
<div id="techSection" class="s-teaser">Tech</div>
<div id="financeSection" class="s-teaser">Finance</div>
<div id="politicsSection" class="s-teaser">Politics</div>
<div id="strategySection" class="s-teaser">Strategy</div>
</div>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
</div>
CSS(仅作为示例,因为您肯定需要其他样式):
html, body {
margin:0;
padding:0;
font:12px/16px Arial, Helvetica, sans-serif;
}
#header {
position:relative;
height:40px;
}
#nav {
margin:0;
padding:0;
list-style:none;
font:12px/40px Arial, Helvetica, sans-serif;
}
#nav li {
float:left;
border:1px solid #666;
width:25%;
box-sizing:border-box;
text-align:center;
}
#nav a {
color:#333;
text-decoration:none;
display:block;
height:40px;
}
#nav a.active {
background:#999;
color:#333;
}
#sectionTeaser {
height:150px;
width:100%;
top:42px;
position:absolute;
display:none;
}
#sectionTeaser .s-teaser {
display:none;
position:absolute;
bottom:0;
left:0;
top:0;
right:0;
height:150px;
font:18px/150px Arial, Helvetica, sans-serif;
background:#fff;
text-align:center;
text-transform:uppercese;
}
所以,这个想法是使用链接列表和通过数据属性连接的内容块。当我们悬停在一个链接上时,js(jQuery)会找到对应的块并显示它。