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() {
    jQuery("div")
    .on('mouseenter', 'img', onHover);
    function onHover() {
    let src = jQuery(this).attr('src');
      if  (src.indexOf('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Lama_glama_Laguna_Colorada_2.jpg/750px-Lama_glama_Laguna_Colorakda_2.') !== -1)
      {hint.html(1).show();}
        if (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();},
mousemove: function(e){
let all = jQuery(window).height();
let top1 = jQuery('#hint').offset().top - jQuery(window).scrollTop();
let height = jQuery('#hint').outerHeight(true) + 30;
let offset = all - (top1 + height);
let pagetop = e.pageY;
if (offset < 0)
pagetop = e.pageY + offset;
hint.css({top: pagetop, left: e.pageX});
    }
})});