Select and hover div

Hover a div

by Rohit Bisht

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

CSS

.square {
width: 200px;
height: 200px;
margin-left: 5px;
margin-top: 10px;
float: left;
/* Rectangle 6: */
background: #FFFFFF;
box-shadow: 0 4px 8px 0 rgba(88,88,88,0.50);
border-radius: 2%;
}

.square:hover {
transform: scale(1.25, 1.25);
}

.selectedSquare {
outline: 3px dashed #0066ff; outline-offset: -10px;
}

JavaScript

$('.square').on('click',function(){
    $(".square").removeClass("selectedSquare");
    $(this).addClass("selectedSquare");
});