javascript - 使网页内容半透明，点击或悬停时更透明

Question

我试图让我的 iframe 在加载时不可见，当鼠标悬停在它上面时可见，但是我不确定我做错了什么。谁能告诉我我做错了什么？

$(document).ready(

function makeVisible(){
    $(".video").hover(function(){
    $('.youtube').css("visibility", "visible");
   })
)}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<link rel = "stylesheet" type = "text/css" href = "stylesheet.css">
<script src="JavaScript.js" type="text/javascript"></script>
  
<section class = "video">
  <p>This is my section</p>
  <iframe class = "youtube" hover="makeVisible()" width="700" height="397" src="https://www.youtube.com/embed/pMX5yyW5Qp0" frameborder="0" allowfullscreen  style="visibility:hidden"></iframe>
  </iframe>
</section>

Answer 1

这里不需要JS代码，可以使用JS中的:hover伪选择器来修改元素的opacity，像这样:

iframe { opacity: 0.2; }
iframe:hover { opacity: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="JavaScript.js" type="text/javascript"></script>

<section class="video">
  <p>This is my section</p>
  <iframe class="youtube" width="700" height="397" src="https://stacksnippets.com" frameborder="0" allowfullscreen></iframe>
</section>

请注意，我必须将 iframe URL 更改为 stacksnippets.com，因为它是沙盒。