Member Avatar for Baradaran

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

  • 2 Contributors
  • 2 Replies
  • 250 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Baradaran
Member Avatar for pritaeas

Like this ?

<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>
Edited by pritaeas because: tabs to spaces
Member Avatar for Baradaran

Great, thank you for the quick reply, working perfect. Thank you again.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.