0

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.

Daniel
  • 3
  • 1
  • 1
    See [this](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered) – Rob Moll May 25 '21 at 15:05

1 Answers1

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