Jeff Winset Jeff Winset - 6 months ago 22
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?


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

<script src="" 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="" frameborder="0" allowfullscreen style="visibility:hidden"></iframe>

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="" 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="" frameborder="0" allowfullscreen></iframe>

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download