jQuery addClass example

Change class name on click in jQuery

by joplomacedo

HTML

<div class="container">
  <div class="window">
    <div class="content"></div>
  </div>
</div>

CSS

.container {
  overflow: hidden;
}

.window {
  max-width: 200px;
  margin: auto;
  background-color: blue;
}

.content {
  width: 1000px;
  height: 50px;
  background-color: rgba(0,0,0,.3);
  transform: translateX(-30%);
}

JavaScript

const $container = $('.container');
const $window = $('.window');
const $content = $('.content');

// handle click and add class
$window.on("mousemove", function( e ){
const  original = e.originalEvent;

const x = original.clientX;
const y = original.clientY;

const rect =  original.currentTarget.getBoundingClientRect();

const minX = rect.x;
const maxX = rect.x + rect.width;

const minY = rect.y;
const maxY = rect.y + rect.height;


if ( x >= minX && x <= maxX &&
	y >= minY && y <= maxY
)  {
	console.log('mouseinside')
}
  
})