AJAX

onmouseover on parent element

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Feb 2007

Posts: 66

Reputation: Baradaran is an unknown quantity at this point

Solved Threads: 4

Baradaran

Offline

Junior Poster in Training

onmouseover on parent element

24 Days Ago

Hi,
This is probably a very simple problem, but still it is bugging me for a while. I have tried to google for solutions, but I did not find any.

I have a div containing a few text elements like date and description. I want to change the background-color of the div to a light grey when the mouse is over it. This works fine. The problem: As soon as the mouse is over a child element, the background changes back!

What to do?

I appreciate your help.

Regards,
Ali Baradaran

•

Join Date: Jul 2006

Posts: 849

Reputation: pritaeas will become famous soon enough

Solved Threads: 138

pritaeas

Offline

Practically a Posting Shark

-1

24 Days Ago

Like this ?

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#wrapper").hover(
           function () {
             $(this).toggleClass("blue");
           }, 
           function () {
             $(this).toggleClass("blue");
           }
         );
      });
    </script>
    <style type="text/css">
      #wrapper {
        background-color: #ccc;
      }
      #wrapper.blue {
        background-color: #ccf;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <p>date</p>
      <p>description</p>
    </div>
  </body>
</html>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#wrapper").hover(
           function () {
             $(this).toggleClass("blue");
           }, 
           function () {
             $(this).toggleClass("blue");
           }
         );
      });
    </script>
    <style type="text/css">
      #wrapper {
        background-color: #ccc;
      }
      #wrapper.blue {
        background-color: #ccf;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <p>date</p>
      <p>description</p>
    </div>
  </body>
</html>