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




i attempting make iframe invisible upon loading , visible when mouse hovering on it, i'm not sure doing wrong. can tell me 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 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>

there's no need js code here, can use :hover pseudo selector in js amend opacity of element, 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 section</p>    <iframe class="youtube" width="700" height="397" src="https://stacksnippets.com" frameborder="0" allowfullscreen></iframe>  </section>

note had change iframe url stacksnippets.com it's sandboxed.





wiki

Comments

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

python - Read npy file directly from S3 StreamingBody -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -