I would like to create a layout with 3 columns for menu, story, and description. Each story should have its own unique description. Everything was working fine until I added a div to the middle column. The same issue arose with the right column but I managed to resolve it by adding div to ~ .desc, ~ .s1-desc, and ~ .s2-desc. I understand why the selection doesn't work for the middle column, but I am unsure of what needs to be implemented to achieve the desired outcome. How can I make it so that when I hover over .s1, .s1-desc is displayed?
Here is the code snippet that is currently functioning: (The div causing issues in the HTML has been commented out)
<!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>
The following code snippet showcases the issue:
<!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">
<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>