Databases
StackOverflow2013
Postsdbo
POJquery hide elements on mouseout()
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery hide elements on mouseout()
    text
    copied!<p>I've just started learning Jquery and I was lucky enough to get something to work. My first code was to create a "Dim the light" effect when a button is pressed and "Show the light" when the light is out. That part is working quite fine. </p> <p>Here's the code:</p> <pre><code>$(document).ready(function(){ $(".dimlight").click(function(){ $("#overlay").fadeIn(); $(".dimlight").hide(); $(".showlight").show(); }); $(".showlight").click(function(){ $("#overlay").fadeOut(); $(".dimlight").show(); $(".showlight").hide(); }); }); </code></pre> <p>Now I wanted to take it a step further. I'd like to hide any visible button (.showlight or .dimlight) on mouseout. Basically, the active button should only be visible when the user hovers the player (#player div). Now I tried doing it, but it didn't work. I suspect that the syntax is wrong. It sure looks very childish, sorry guys. It's my first attempt and I'd like to learn by doing.</p> <p>Here's the extended code that doens't work.</p> <pre><code> $(document).ready(function(){ $(".dimlight").click(function(){ $("#overlay").fadeIn(); $(".dimlight").hide(); $(".showlight").show(); }); $(".showlight").click(function(){ $("#overlay").fadeOut(); $(".dimlight").show(); $(".showlight").hide(); }); $("#player").mouseover(function(){ if ($('#overlay').is(':hidden')) { $('.dimlight').show(); } else { $('.showlight').show(); } }).mouseout(function() { if ($('.dimlight').is(':hidden')) { $('.showlight').hide(); } else { $('.dimlight').hide(); } }); }); </code></pre> <p>Any help is greatly appreciated.</p> <p>He're the html:</p> <pre><code> &lt;div id="videoplayer_two-col"&gt; &lt;span class="dimlight" title="Baisser la lumi&amp;egrave;re"&gt;Baisser la lumi&amp;egrave;re&lt;/span&gt; &lt;span class="showlight" title="Alumer la lumi&amp;egrave;re"&gt;Alumer la lumi&amp;egrave;re&lt;/span&gt; &lt;video id="player" width="633" height="320" poster="assets/components/ME/media/echo-hereweare.jpg" volume="0.5" controls preload="none"&gt; &lt;!-- MP4 source must come first for iOS --&gt; &lt;source type="video/mp4" src="assets/components/ME/media/echo-hereweare.mp4" /&gt; &lt;object width="633" height="320" type="application/x-shockwave-flash" data="assets/components/ME/build/flashmediaelement.swf"&gt; &lt;param name="movie" value="assets/components/ME/build/flashmediaelement.swf" /&gt; &lt;param name="wmode" value="transparent" /&gt; &lt;param name="flashvars" value="controls=true&amp;amp;file=assets/components/ME/media/media/echo-hereweare.mp4" /&gt; &lt;!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed --&gt; &lt;img src="assets/components/ME/media/echo-hereweare.jpg" width="640" height="360" alt="Here we are" title="No video playback capabilities" /&gt; &lt;/object&gt; &lt;/video&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload