使用CSS悬停另一个div时如何显示一个div？ [复制]答案

【问题标题】：How to show a div when hovering another div using CSS? [duplicate]使用CSS悬停另一个div时如何显示一个div？ [复制]
【发布时间】：2021-05-25 23:10:39
【问题描述】：

我有一个 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;
}

当悬停带有.karaoke 类的div 时，.karaoke:hover .lyrics-w { display: block; } 应该使带有.lyrics-w 类的div 可见（带有display: block;），但由于某种原因它不可见。我多次使用这种代码在悬停特定元素时更改另一个元素的 CSS 属性，直到现在它运行良好，我不明白为什么它在这里不起作用。也许是因为.karaoke 和.lyrics-w 是独立的对象（我的意思是一个不是另一个的孩子）？我不知道。

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

【问题讨论】：

见this

标签： html css hover

【解决方案1】：

不要使用.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

【讨论】：