Question

When I do

#box {
    height: 150px;
    width: 150px;
    background-color: #cc66ff;
}

#box:active {
    width: 300px; height: 300px;
    -webkit-transition: width 1s linear, height 1s linear;
       -moz-transition: width 1s linear, height 1s linear;
        -ms-transition: width 1s linear, height 1s linear;
         -o-transition: width 1s linear, height 1s linear;
            transition: width 1s linear, height 1s linear;
}

The changes discarded once I release the mouse button, is there way to make them stay? to expand the box and keep it that way using CSS or/and JS?

Answer 1

You can use the jQuery animate function:

$("#box").click(function() {
  $(this).animate({ width: "300px", height: "300px" }, { queue: false, duration: 3000 })
});

Or alternatively have your transition as a result of a css class, rather than the :active psuedoselector:

#box.active {
  width: 300px; height: 300px;
  -webkit-transition: width 1s linear, height 1s linear;
  -moz-transition: width 1s linear, height 1s linear;
  -ms-transition: width 1s linear, height 1s linear;
  -o-transition: width 1s linear, height 1s linear;
   transition: width 1s linear, height 1s linear;
}

$("#box").click(function() {
  $(this).addClass('active');
});