jQuery addClass example

Change class name on click in jQuery

by Daniil464

HTML

<div><div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Lama_glama_Laguna_Colorada_2.jpg/750px-Lama_glama_Laguna_Colorada_2.jpg" width="108" height="108"></div><div id="hint"></div> </div>


<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Wikimedia-logo_black.svg/68px-Wikimedia-logo_black.svg.png" width="108" height="108"></div>

CSS

#hint {
    display: none;
    position: absolute;
    padding: 15px;
    margin: 5px auto auto 15px;
    border-radius: 5px;
	border-color: #354d77;
    box-shadow: 0 0 1px 2px rgba(0,0,0,.3);
    background-color: #fff;
    z-index: 100500;
	max-width: 800px;
  min-height: 200px;
	font-size: 14px;
	color: #54595F;
}

JavaScript

var hint = jQuery('#hint');
jQuery(document).ready(function() { // нужная картинка генерирует нужное содержимое для подсказки в div при наведении
    jQuery("div")
    .on('mouseenter', 'img', onHover);
    function onHover() {
      if  (jQuery(this).attr('src') == 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Lama_glama_Laguna_Colorada_2.jpg/750px-Lama_glama_Laguna_Colorada_2.jpg')
      {hint.html(1).show();}
        if (jQuery(this).attr('src') == 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Wikimedia-logo_black.svg/68px-Wikimedia-logo_black.svg.png') 
        {hint.html(2).show();}
        
    }
});

jQuery(document).ready(function() { jQuery('div').on({
mouseout: function(){hint.hide();}, // спрятать div если на нужном элементе нет курсора
mousemove: function(e){ // расчет позиции div'а если на нужном элементе курсор
let all = jQuery(window).height(); // высота окна браузера
let top1 = jQuery('#hint').offset().top - jQuery(window).scrollTop(); // высота div'а относительно окна браузера
let height = jQuery('#hint').outerHeight(true) + 30; // высота сожержимого в div'е + отступ
let offset = all - (top1 + height); // отрицательное значение говорит что div ниже страницы
let pagetop = e.pageY; // положение высоты(верх-низ) курсора
if (offset < 0) // если отрицательное значение то прибавляем разницу
pagetop = e.pageY + offset;
hint.css({top: pagetop, left: e.pageX});  // положение div'а равно положению высоты(верх-низ) курсора и положению оси X(лево-право) курсора
    }
})});