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
Post a Comment