如何解决如何修复由于容器而无法正常工作的链接上的悬停?
我想为菜单,故事和说明提供3列。我想展示每个故事的独特描述。一切正常,直到我在中间列上放置div
为止。右列发生了相同的问题,但通过向div
,~ .desc
和~ .s1-desc
添加~ .s2-desc
来解决。我了解为什么选择对于中间列不起作用,但是我不确定要实现什么才能使我想要的工作生效。如何悬停.s1
以显示.s1-desc
?
这是我正在工作的内容:(在HTML中已注释了打破CSS的div)
<!DOCTYPE html>
<html>
<head>
<style>
.row {
display: flex;
}
.sideCol {
flex: 30%;
margin: 10px;
padding: 10px;
}
.midCol {
flex: 40%;
margin: 50px;
}
.desc,.s1-desc,.s2-desc {
display: none;
}
a:not(.home):hover ~ div .desc {
display: block;
color: red;
}
.s1:hover ~ div .s1-desc,.s2:hover ~ div .s2-desc {
display: block;
color: purple;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="row">
<div class="sideCol">
<p>Menu</p>
<a href="#">Category One</a>
<a href="#">Category Two</a>
</div>
<!-- <div class="midCol"> this div is what breaks the scope but I need a column here -->
<p>Selection</p>
<a class="home" href="#">Home</a>
<a class="s1" href="#">Story One</a>
<a class="s2" href="#">Story Two</a>
<!-- </div> -->
<div class="sideCol">
<p class="desc">Description</p>
<p class="s1-desc">Desc of Story One. A Desc of Story One. Desc of Story One. A Desc of Story One. Desc of Story One.</p>
<p class="s2-desc">Desc of Story Two. A Desc of Story Two. Desc of Story Two. A Desc of Story Two. Desc of Story Two.</p>
</div>
</div>
</body>
</html>
这是行不通的:
<!DOCTYPE html>
<html>
<head>
<style>
.row {
display: flex;
}
.sideCol {
flex: 30%;
margin: 10px;
padding: 10px;
}
.midCol {
flex: 40%;
margin: 50px;
}
.desc,.s2:hover ~ div .s2-desc {
display: block;
color: purple;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="row">
<div class="sideCol">
<p>Menu</p>
<a href="#">Category One</a>
<a href="#">Category Two</a>
</div>
<div class="midCol">
<p>Selection</p>
<a class="home" href="#">Home</a>
<a class="s1" href="#">Story One</a>
<a class="s2" href="#">Story Two</a>
</div>
<div class="sideCol">
<p class="desc">Description</p>
<p class="s1-desc">Desc of Story One. A Desc of Story One. Desc of Story One. A Desc of Story One. Desc of Story One.</p>
<p class="s2-desc">Desc of Story Two. A Desc of Story Two. Desc of Story Two. A Desc of Story Two. Desc of Story Two.</p>
</div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。