所有CSS和Javascript大师们都在这里。我想创建垂直居中的可自定义悬停选项卡(可以是使用我自己的背景图像简单地创建的按钮)。将一个选项卡悬停时将显示该选项卡的内容，并且该选项卡的内容可以(如果可能)使用另一个自定义图像加下划线。一个重要的问题是页面应该保持静止。大多数示例只是将页面/div 拉回顶部。
例如，这有一个定位问题。
首先：是否可以仅使用CSS和悬停来更改(显示/隐藏)内容来实现这一点？我的内容只是每个选项卡的图像，因此如果我可以在悬停选项卡按钮时显示或隐藏包含该图像的div，只要我可以轻松操作其大小和位置就足够了。
如果最后我必须使用javascript和按钮来实现上述所有挑战，那么最好的方法是什么？
如果我可以将带有其内容的选项卡放在一个div 中，我可以随意操作其大小或嵌入到其他 html 代码中，那也将很棒。
非常感谢您的建议。
以下是上述链接使用的 CSS：
h1 {
color: #333;
font-family: arial, sans-serif;
margin: 1em auto;
width: 80%;
}
.tabordion {
color: #333;
display: block;
font-family: arial, sans-serif;
margin: auto;
position: relative;
width: 80%;
}
.tabordion input[name="sections"] {
left: -9999px;
position: absolute;
top: -9999px;
}
.tabordion section {
display: block;
}
.tabordion section label {
background: #ccc;
border:1px solid #fff;
cursor: pointer;
display: block;
font-size: 1.2em;
font-weight: bold;
padding: 15px 20px;
position: relative;
width: 180px;
z-index:100;
}
.tabordion section article {
display: none;
left: 230px;
min-width: 300px;
padding: 0 0 0 21px;
position: absolute;
top: 0;
}
.tabordion section article:after {
background-color: #ccc;
bottom: 0;
content: "";
display: block;
left:-229px;
position: absolute;
top: 0;
width: 220px;
z-index:1;
}
.tabordion input[name="sections"]:checked + label {
background: #eee;
color: #bbb;
}
.tabordion input[name="sections"]:checked ~ article {
display: block;
}
@media (max-width: 533px) {
h1 {
width: 100%;
}
.tabordion {
width: 100%;
}
.tabordion section label {
font-size: 1em;
width: 160px;
}
.tabordion section article {
left: 200px;
min-width: 270px;
}
.tabordion section article:after {
background-color: #ccc;
bottom: 0;
content: "";
display: block;
left:-199px;
position: absolute;
top: 0;
width: 200px;
}
}
@media (max-width: 768px) {
h1 {
width: 96%;
}
.tabordion {
width: 96%;
}
}
@media (min-width: 1366px) {
h1 {
width: 70%;
}
.tabordion {
width: 70%;
}
}
像这样的东西？
$(function() {
$('#tab1').addClass('last');
});
var $tabs = $('.tab');
$tabs.hover(function() {
$tabs.not($(this)).removeClass('last');
$(this).addClass('last');
})body {
position: relative;
width: 50%;
margin: 10% auto;
}
.tab {
width: 20%;
height: 50px;
background: gray;
cursor: pointer;
}
.content {
background: #ccc;
display: none;
}
.clear {
clear: both;
height: 10px;
}
#tab1:hover+#content1,
#tab2:hover+#content2,
#tab3:hover+#content3,
.last+.content {
display: block;
}
#tab1 {
position: absolute;
top: 0;
left: 0;
}
#tab2 {
position: absolute;
top: 60px;
left: 0;
}
#tab3 {
position: absolute;
top: 120px;
left: 0;
}
#content1 {
position: absolute;
top: 0;
left: 20%;
}
#content2 {
position: absolute;
top: 0;
left: 20%;
}
#content3 {
position: absolute;
top: 0;
left: 20%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="tab1" class="tab">
Tab 1
</div>
<div id="content1" class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in ullamcorper nisi. Cras sit amet ligula aliquet justo pellentesque dignissim. Integer ullamcorper felis magna, a porttitor urna molestie vitae. Fusce vitae pharetra tortor. Integer non
ex quis ex tristique laoreet. Nulla interdum porta sem, eu eleifend felis elementum eu. Integer vehicula nibh metus, id eleifend diam vestibulum ac. Curabitur malesuada mauris nec libero vulputate, id interdum tortor tempor. Cras tincidunt arcu at
orci ullamcorper faucibus id et metus. Vestibulum semper condimentum volutpat. Nullam a ex ante. Cras laoreet felis dictum lectus elementum, non tempor ex feugiat.
</div>
<div id="tab2" class="tab">
Tab 2
</div>
<div id="content2" class="content">
Nunc sed felis posuere, consectetur mauris at, gravida augue. Phasellus eget ligula non massa vestibulum placerat. Mauris finibus iaculis lectus, at tincidunt nibh placerat ut. Quisque ut justo eget odio pulvinar imperdiet. Nulla suscipit ultrices eros,
et feugiat neque blandit eget. Donec fermentum semper efficitur. Sed bibendum, nisl a scelerisque condimentum, nulla augue tincidunt justo, eu varius sapien ipsum luctus nisi. Phasellus leo neque, molestie id nibh ut, eleifend ornare arcu. Ut id odio
mi. Sed mollis ut est a iaculis. Nunc tempor euismod varius.
</div>
<div id="tab3" class="tab">
Tab 3
</div>
<div id="content3" class="content">
Suspendisse eget orci molestie, placerat risus posuere, pellentesque velit. Maecenas eu sapien non nisl facilisis fringilla sit amet eu ipsum. Donec vel dui ut augue efficitur aliquam et sit amet nunc. Aliquam ac facilisis ante. Nulla eget ex at metus
auctor tincidunt. Morbi pellentesque pulvinar nunc, a consectetur quam. Duis id pretium tellus, sit amet bibendum neque. Donec orci tellus, auctor in sapien pellentesque, posuere egestas eros. Fusce metus augue, porttitor in lectus et, sagittis mollis
lectus. Proin sed lectus egestas lectus fringilla feugiat.
</div>
</body>