Как показать кнопку при наведении на картинку?

Question

[Алексей Ярков]

Есть задача:
Найти все картинки на странице и если картинка соответствует условиям, то при наведении на нее курсора, нужно показать кнопку в левом верхнем углу картинки.

Кнопку то я вывел, а вот как нажатие обработать не очень понял.

content.js

function ShowButton(elem){
	elem.wrap("<div class='CheckItLink_Wrap'></div>");
	var parent = elem.parent(".CheckItLink_Wrap");
	parent.append("<span class='CheckItLink_Button'></span>");
	console.log("mouseover");
}

function HideButton(elem){
	elem.parent().children().last().remove();
	elem.unwrap();
	console.log("mouseout");
}

function CheckItLinkClick(th){
	console.log("Click");
}


$(document).ready(function(){

	$(".CheckItLink_Button").on('click', function(){
		CheckItLinkClick(this);
	});

	$("img").hover(
		function() {
			ShowButton($(this));
		},
		function() {
			HideButton($(this));
		}
	);

});

content.css

.CheckItLink_Button{
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 16px;
	z-index: 9999;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNvyMY98AAAEFSURBVDhPY6AeyN3Gzlm6eBVH2eL1+DBnyeIVDPX1TFBdCMCfP1+As2zJf2IwQ/1+Fqg2BMBmgFT9yv+itStQxECYaAPSVh79F7f00D90cbwGCFYt+2fev/U/CO+99ezf9muP4XyBymVgwwi6oGD9yX/ffv3+DwNff/76n7XmONwlhL1QuuR/0YaT/6D6UTQTZwAQr7v04N/0I9f/zTl+89/yc3dJM4ALiL1m7YJr8kZigzBRLsCH6WMAR+niL0C6C5h8+zhKl3xFlsNrAFDjZ5BG7uJFYlApBq6S+RIQgxZ/w2kAQ+FKTmD0tfAULRWBimAArpJVEkA17Qyhq5ihQpQCBgYA0VtKVQNRqwQAAAAASUVORK5CYII=);

}

.CheckItLink_Wrap{
	position: relative;
}

Когда навожу мышку на кнопку - срабатывает onmoseout. Как мне быть?

Answer 1

[Stalker_RED]

Потому что mouseout срабатывает при наведении на дочерний элемент. Можно использовать mouseleave.
www.w3schools.com/jquery/tryit.asp?filename=tryjqu...

Comments

[Алексей Ярков]

Бессмысленно... Не работает так.

[Stalker_RED]

Алексей Ярков: Можете собрать пример на jsfidlle?

[Алексей Ярков]

Stalker_RED: буду дома скоро и соберу. А вообще я уже нашел способ который мне нужен. Но интересно разобраться почему оно так ))

[Stalker_RED]

Алексей Ярков: переписал ваш пример с hover
https://jsfiddle.net/9gf4vze9/
теперь попробуйте поменять mouseleave на mouseout - он будет срабатывать при наведении на дочерний элемент, как я и писал.

[Алексей Ярков]

Stalker_RED: Вот до чего дошел в итоге: https://jsfiddle.net/9gf4vze9/1/. То что нужно.

[Stalker_RED]

Алексей Ярков:
Вся анимация умещается в пару строк css (hover, opacity, transition).

И вам действительно нужно размещать эти кнопочки на ВСЕХ картинках?

[Stalker_RED]

Алексей Ярков: Ссылку забыл https://jsfiddle.net/9gf4vze9/2/

[Алексей Ярков]

Stalker_RED: я пишу расширение для онлайн сервиса хранения закладок. И нужно на картинках показать кнопочку Сохранить. Скоро опубликуем в вебсторе - тогда кину ссылку.

Answer 2

[Алексей Ярков]

Вот примерно то что у меня получилось.
https://jsfiddle.net/1wm5Ly9s/5/