jQuery toggleClass example

Toggle class name on click in jQuery

by Suryar Praveen

HTML

<!DOCTYPE html>
<html>

  <head>
    <style>
      div.out {
        width: 40%;
        height: 120px;
        margin: 0 15px;
        background-color: #D6EDFC;
        float: left;
      }

      div.in {
        width: 60%;
        height: 60%;
        background-color: #FFCC00;
        margin: 10px auto;
      }

      p {
        line-height: 1em;
        margin: 0;
        padding: 0;
      }

    </style>
  </head>

  <body>

    <div class="out">
      <p>move your mouse</p>
      <div class="in overout">
        <p>move your mouse</p>
        <p>0</p>
      </div>
      <p>0</p>
    </div>
  </body>

</html>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

var i = 0;
    $("div.overout").mouseover(function(){
      $("p:first",this).text("mouse over");
    }).mouseout(function(){
      $("p:first",this).text("mouse out");
      $("p:last",this).text(++i);
    });