Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

这里不需要JS代码，你可以使用JS中的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>

{{1}}

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

Answer 2

我知道如何在使用Javascript点击某些内容时更改某些内容的透明度/不透明度。

<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" onclick="makeVisible()" width="700" height="397" src="https://www.youtube.com/embed/pMX5yyW5Qp0" frameborder="0" allowfullscreen  style="visibility:hidden"></iframe>
  </iframe>
</section>

JavaScript.js：

function makeVisible(){
 var video = document.getElementsByClassName('youtube')
 video.style.opacity = "Your opacity here"
}

在点击或悬停时使网页内容半透明且更透明

2 个答案: