Question

当用户将鼠标悬停在歌曲上时，我想显示歌曲的歌词？

$(".current-song-name").hover(function () {
        $(".song1_lyrics").css();
    });

<div class=song1_lyrics>song lyrics</div>

Answer 1

这是我的解决方案，您不需要JavaScript：

.song-lyrics-inner {
  display:none
}

.song-lyrics:hover .song-lyrics-inner {
  display:block;
}

<div class="song-lyrics">
  Hover me to see the song lyrics!
  <div class="song-lyrics-inner"> song lyrics<div>
</div>

现在要对此进行测试，您可以在页面中使用样式标记，但我建议使用css外部文件并将其链接。

<!DOCTYPE html>
  <html>
    <head>
    <style>
      .song-lyrics-inner {
        display:none
      }

      .song-lyrics:hover .song-lyrics-inner {
        display:block;
      }
    </style>
  </head>
<body>

Answer 2

如果歌词位于标记中的歌曲名称之后，则无需使用Javascript。

您可以使用CSS中的~选择器来选择兄弟姐妹。在这种情况下，我们将使用.song:hover ~ lyrics选择类lyrics的任何元素，该类是类song悬停的元素的兄弟。如果它们在单独的div中，这将适用于多首歌曲。

＆＃13;

.song-wrapper {
  height: 50px
}

.lyrics {
  display: none
}

.song:hover~.lyrics {
  display: inline-block
}

＆＃13;

<div class="song-wrapper">
  <div class="song">walking on sunshine</div>
  <dic class="lyrics">I'm walking on sunshine</div>
</div>
<div class="song-wrapper">
  <div class="song">song 2</div>
  <dic class="lyrics">song2 lyrics</div>
</div>
<div class="song-wrapper">
  <div class="song">song 3</div>
  <div class="lyrics">song 3 lyrics</div>
</div>

＆＃13;

如何在jquery中添加悬停效果中的文本

2 个答案: