Div color on MouseHover using JQuery in VB.NET

This description is about how to change the div color on mouse hover in JQuery.
  • 2022

I would like to share my experience about jQuery div click events on mouse hover. We'll have a block of content that when the mouse moves over the div it will changes its color and then after mouse click on div.

Let's have a sneak peak through an example about what I am trying to explain you.

Example

<
html>
  <head>
  <title>JQuery Example</title>
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript'>
         $(document).bind(
  'ready',
  function () {
      $('div').bind(
      'mouseover',
      function () {
          $(this).addClass('MouseOver');
      }
    );
       $('div').bind(
      'mouseout',
      function () {
          $(this).removeClass('MouseOver');
      }
    );
       $('div').bind(
      'click',
      function () {
          if ($(this).hasClass('MouseOn')) {
              $(this).removeClass('MouseOn');
          } else {
              $(this).addClass('MouseOn');
          }
      }
    );
  }
);
    </script>
    <style type='text/css'>
        div {
    border: 1px solid rgb(200, 200, 200);
    width: 36px;
    height: 88px;
    margin: 5px;
    float: left;
}
div.MouseOver {
    background: orange;
}
div.MouseOn {
    background: blue;
}
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

Output

div 1.gif

When you move mouse over a specific div it will be appear orange and changes its color into blue when you click on it. If you click again on that div it turns into orange and then white after mouse hover.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.