Question

有没有办法让鼠标悬停在嵌入视频中？我在DIV中尝试了ALT和TITLE属性，但没有成功。

<!DOCTYPE html>
<html>
<body>
<DIV TITLE="TEST" ALT="Test">
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
</DIV>
</body>
</html>

我发现这个纯粹的JS解决方案可以悬停播放视频，但不知道如何在悬停时修改标题。

script>var playersrc;</script>
<iframe class="yt560x315" id="JSytplayer" src="https://www.youtube.com/embed/MVKts0fBW34?rel=0" onmouseover="this.src=playersrc+'&autoplay=1'" onmouseout="this.src=playersrc" frameborder="0" allowfullscreen></iframe>
<script>playersrc=document.getElementById('JSytplayer').src;</script>

Answer 1

当光标悬停在视频上时，您的iframe代码优先，而iframes不接受“title”属性，因此它永远不会出现。

我认为只有一种方法可以显示你的div的标题，就是在你的div中添加一个填充，但只有当你悬停你的填充区域时才会出现，而不是将其悬停在iframe上。

但是，我会用jQuery

来做

您的HTML代码：

<!DOCTYPE html>
<html>
<body>
  <DIV id="wrapper">
      <div id="tooltip" style="display:none;">Title</div>
      <iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k">
      </iframe>
    </DIV>
  </body>
</html>

您的jQuery代码：

$(document).ready(function(){
  $("#wrapper").hover(function(){
    // Show our tooltip on hover
    $("#tooltip").show();
  }, function(){
    // Hide our tooltip
    $("#tooltip").hide();
  })
});

然后你只需要添加一些CSS

悬停在嵌入视频中的标题

1 个答案: