如何在使用 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
我有一个 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