如何在使用 CSS 悬停另一个 div 时显示 div?

How to show a div when hovering another div using CSS?

我有一个 div,其中包含一个显示视频(歌曲)的 iframe 元素,以及另一个显示该歌曲歌词的 div。显示歌词的 div 设置为 display: none;。现在,我想在悬停包含带有视频的 iframe 元素的 div 时显示此 div(歌词)。 (不允许我使用Javascript,只能使用CSS).

我有:

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;
}

当将 div 悬停在class .karaoke,但由于某些原因它没有。我多次使用这种代码在悬停特定元素时更改另一个元素的 CSS 属性,直到现在它运行良好,我不明白为什么它在这里不起作用。也许是因为 .karaoke.lyrics-w 是独立的 objects(我的意思是一个不是另一个的 child)?我不知道。

有什么想法吗?提前致谢。

而不是使用 .karaoke:hover .lyrics-w { display: block; } 使用这个

.karaoke:hover ~.lyrics-w {display: block;}

(中间用~) 所以你的代码应该是这样的

     .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>

有关详细信息,请访问 this answer