I have a <h1>
who change on click and who gets new content. The new content is two <span>
with different id and there is text and an img in each.
If a <span>
is on hover, I'd like to change the src of his image.
Actually, my code only works if I set $('h1').hover(function() {};
which in my case should be two functions because otherwise it will change the src of both images.
I tried $('#SpanId').hover(function() {};
but without success.
Here is my simplified code :
HTML
<h1>Hello World</h1>
<button>Change title</button>
jQuery
// On click, change title
$('button').click(function() {
$('h1').html('');
$('h1').append('<span id="info">Information <img alt="Info icon" src="http://www.iconsdb.com/icons/preview/orange/info-xxl.png"></span>');
});
// Change info icon on hover
$('#info').hover(function() {
$('#info img').attr('src', 'http://www.iconsdb.com/icons/preview/gray/info-2-xxl.png');
}, function() {
$('#info img').attr('src', 'http://www.iconsdb.com/icons/preview/orange/info-xxl.png');
});
Codepen https://codepen.io/Qasph/pen/vmLwWJ
Thanks in advance and have a nice day!