Closed. This question needs to be more
focused。它当前不接受答案。
想改善这个问题吗？更新问题，使其仅通过
editing this post专注于一个问题。
4年前关闭。
我正在尝试制作一个Tumblr页面。想法是在左侧列出几个书名，将其悬停时在右侧显示有关该书的信息。
Example此处，“示例2”悬停在蓝色框中，因此其相应的信息显示在右侧的红色框中。如果我要从此处悬停在“示例3”上，则“示例2”的信息框将逐渐消失，而“示例3”的信息框将逐渐消失。我希望我在这里有一定的道理。
现在，我知道我可以使用纯CSS实现此目的，但是我想那将涉及为列表中的每个标题创建一个自定义CSS类。还有其他方法可以避免CSS舞动吗？
Pure CSS, one class for all titles - Codepen
的HTML
<div class="menu">
<a href="#">Example 1</a>
<div class="show">
<h1>EXAMPLE 1</h1>
<hr>
<p>text here</p>
</div>
<a href="#">Example 2</a>
<div class="show">
<h1>EXAMPLE 2</h1>
<hr>
<p>text here</p>
</div>
<a href="#">Example 3</a>
<div class="show">
<h1>EXAMPLE 3</h1>
<hr>
<p>text here</p>
</div>
<a href="#">Example 4</a>
<div class="show">
<h1>EXAMPLE 4</h1>
<hr>
<p>text here</p>
</div>
</div>
的CSS
body, html {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.menu {
width: 120px;
height: 300px;
background-color: #2F43B7;
}
.menu a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: block;
}
.menu a:hover + .show { /* Select .show that is immediately after a */
opacity: 1;
}
.show {
transition: 500ms;
opacity: 0;
background-color: #B72F2F;
position: absolute;
top: 0;
left: 130px;
width: 400px;
height: 300px;
text-align: center;
}
.show h1 {
font-size: 46px;
margin-bottom: 0;
}
.show h1,
.show p {
color: #fff;
}
.show hr {
width: 90%;
border: 2px solid #000;
}
与jQuery相同的效果：
$(".show").css("opacity", 0);
$("a").hover(
function(){
$(this).next(".show").stop().fadeTo("slow",1);
},
function(){
$(this).next(".show").stop().fadeTo("slow",0);
});