Jeff Winset Jeff Winset - 1 month ago 6
HTML Question

making web content semi transparent and more transparent upon click or hover

I am attempting to make my iframe invisible upon loading and visible when mouse is hovering over it, however I'm not sure what I am doing wrong. Can someone tell me what is it I am doing incorrectly?



$(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 Source

There's no need for JS code here, you can use the :hover pseudo selector in JS to amend the opacity of an element, like this:

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>

Note that I had to change the iframe URL to stacksnippets.com as it's sandboxed.