Home/ Questions/Q 6804579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T19:29:00+00:00

I’ve got this working to an ‘almost ready’ state: http://jsbin.com/icuvit Can someone show me

  • 0

I’ve got this working to an ‘almost ready’ state: http://jsbin.com/icuvit

Can someone show me how to fix this, so if I hover it goes dark, instead of being dark in the first instance. So it goes from normal -> dark.

What do I change in the js code below?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>  
  <div id="mask-div"></div>
  <img id="test-img" src="http://www.google.ca/intl/en_ca/images/logo.gif">
<script>
$(document).ready( function() {
  $("#mask-div")
    .css({
      "position": "absolute",
      "width": 275,
      "height": 110,
      "background": "rgba(0, 0, 0, 0.5)",
      "display": "block"
    })
    .mouseover( function() {
         $(this).fadeOut("slow");
    })
  ;

  $("#test-img").mouseout( function() {
      $("#mask-div").fadeIn("slow");
  });

});
</script>  
</body>
</html>

Many thanks for any pointers.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’d need to swap things a bit:

    1. Hide the mask initally
    2. When the image is mouseover-ed, show the mask (when the mask is not yet visible, you’ll mouseover the image)
    3. When the mask is mouseout-ed, hide the mask (when the mask is already visible, you’ll mouseout the mask)

    Like: http://jsbin.com/icuvit/3/edit.

      $("#mask-div")
    .css({
      "position": "absolute",
      "width": 275,
      "height": 110,
      "background": "rgba(0, 0, 0, 0.5)"
    })
    .mouseout( function() {
      $("#mask-div").fadeOut("slow");
    })
    .hide();

  $("#test-img")
    .mouseover( function() {
      $("#mask-div").fadeIn("slow");
    });

    And some CSS for the first time:

    #mask-div {
  display: none;
}
    • 0