How to show a div when hovering another div using CSS? [duplicate] - html

Question

This question already has answers here:
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Closed 1 year ago.
I have a div that contains an iframe element that shows a video (song), and another div that shows the lyrics of that song. the div that shows the lyrics is set with display: none;. now, i want to show this div (lyrics) when the div that contains the iframe element with the video is hovered. (I'm not allowed to use Javascript, only CSS).
What i have:
karaoke.html:
<div class="main-container">
<div class="karaoke" style="top: 30px; left: 30px;">
<iframe frameborder="0" height="100px" width="180px" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<div class="lyrics-w">
<span class="lyrics">lyrics here</span>
</div>
</div>
karaoke.css:
.main-container {
position: relative;
display: block;
height: 600px;
width: 800px;
background: #00aaee;
border-radius: 15px;
margin-top: 70px;
margin-left: auto;
margin-right: auto;
margin-bottom: 70px;
}
.karaoke {
position: absolute;
display: block;
height: 140px;
width: 180px;
background: #f78a69;
cursor: pointer;
border-radius: 10px;
}
.lyrics-w {
position: absolute;
display: none;
height: calc(100% - 30px - 30px - 70px - 30px);
bottom: 30px;
background: salmon;
border-radius: 10px;
left: 50%;
transform: translateX(-50%);
width: 260px;
overflow-x: hidden;
overflow-y: auto;
}
.lyrics {
position: relative;
display: block;
padding: 20px;
line-height: 26px;
overflow: hidden;
text-overflow: ellipsis;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: large;
color: #454545;
font-style: italic;
line-break: auto;
}
.karaoke:hover .lyrics-w {
display: block;
}
The .karaoke:hover .lyrics-w { display: block; } should make the div with the class .lyrics-w visible (with display: block;) when hovering the div with the class .karaoke, but for some reason it doesn't. I used many times this kind of code to change CSS attributes of another elements while hovering specific element, and till now it worked well, I don't understand why it doesn't work here. Maybe because .karaoke and .lyrics-w are independent objects (I mean one is not child of the other)? I don't know.
Any ideas? Thanks in advance.

Answer 1

Instead of using .karaoke:hover .lyrics-w { display: block; } use this
.karaoke:hover ~.lyrics-w {display: block;}
(use a ~ between them)
So your code should be like this
.main-container {
position: relative;
display: block;
height: 600px;
width: 800px;
background: #00aaee;
border-radius: 15px;
margin-top: 70px;
margin-left: auto;
margin-right: auto;
margin-bottom: 70px;
}
.karaoke {
position: absolute;
display: block;
height: 140px;
width: 180px;
background: #f78a69;
cursor: pointer;
border-radius: 10px;
}
.lyrics-w {
position: absolute;
display: none;
height: calc(100% - 30px - 30px - 70px - 30px);
bottom: 30px;
background: salmon;
border-radius: 10px;
left: 50%;
transform: translateX(-50%);
width: 260px;
overflow-x: hidden;
overflow-y: auto;
}
.lyrics {
position: relative;
display: block;
padding: 20px;
line-height: 26px;
overflow: hidden;
text-overflow: ellipsis;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: large;
color: #454545;
font-style: italic;
line-break: auto;
}
.karaoke:hover ~.lyrics-w {display: block;}
<div class="main-container">
<div class="karaoke" style="top: 30px; left: 30px;">
<iframe frameborder="0" height="100px" width="180px" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<div class="lyrics-w">
<span class="lyrics">lyrics here</span>
</div>
</div>
For more info visit this answer