图片src不会悬停改变 - jQuery的

Question

我有一个<h1>谁改变点击谁得到新的内容。新的内容是两个<span>与不同的ID，每个文本和一个IMG。

如果<span>上悬停，我想改变自己的形象的src。

其实，如果我设置$('h1').hover(function() {};这在我的情况应该有两个功能，否则它会改变两个图像的src我的代码才有效。

我试图$('#SpanId').hover(function() {};但没有成功。

这里是我的简化代码：

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

在此先感谢，并有一个愉快的一天！

Answer 1

hover不会触发因为监听器上的对象听的是不存在的，你必须设置监听#info设置后：

// On click, change title 
 
$('button').click(function() { 
 
    $('#info').unbind('hover'); // prevent duplicating hover event 
 

 
    $('h1').html(''); 
 
    $('h1').append('<span id="info">Information <img alt="Info icon" src="http://www.iconsdb.com/icons/preview/orange/info-xxl.png"></span>'); 
 
    
 
    $('#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'); 
 
    }); 
 
});

body {background-color: dodgerblue} 
 
h1 img {width:20px} 
 
#info:hover {color: white}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Hello World</h1> 
 
<button>Change title</button>

Answer 2

的思考是，你动态地创建一个新的元素jQuery它尚未意识到这一点，这使得它不听它的事件。

的解决方案，我要在这里为您提供是听整个文档$(document).on('event_name', 'searching_element', callback_function)给定元素上给定的事件。

// 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>'); 
    } 
); 

$(document).on(
    'mouseover', 
    '#info', 
    function() { 
    var $info = $ (this); 
    var $img = $info.find('img'); 

    $img.attr(
     'src',  
     'http://www.iconsdb.com/icons/preview/orange/info-2-xxl.png' 
    ); 
    } 
); 

$(document).on(
    'mouseout', 
    '#info', 
    function() { 
    var $info = $ (this); 
    var $img = $info.find('img'); 

    $img.attr(
     'src', 
     'http://www.iconsdb.com/icons/preview/orange/info-xxl.png' 
    ); 
    } 
); 

试试你的自我：https://codepen.io/Qasph/pen/vmLwWJ

除此之外，你可以通过使用CSS有同样的效果，比这种简单的东西编写JavaScript更好的解决方案。

$('button').click(
 
    function() { 
 
    $('h1').html(''); 
 
    $('h1').append('<span id="info">Information <span class="img_icon"></span></span>'); 
 
    } 
 
);

body { 
 
    background-color : dodgerblue; 
 
} 
 

 
h1 .img_icon { 
 
    width : 20px; 
 
    height : 20px; 
 
    display : inline-block; 
 
    background-image : url('http://www.iconsdb.com/icons/preview/orange/info-xxl.png'); 
 
    background-repeat : no-repeat; 
 
    background-size : cover; 
 
    background-position : 50% 50%; 
 
} 
 

 
h1:hover .img_icon { 
 
    background-image : url('http://www.iconsdb.com/icons/preview/orange/info-2-xxl.png'); 
 
} 
 

 
#info:hover { 
 
    color : white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Hello World</h1> 
 
<button>Change title</button>

Answer 3

的原因是，当你创建悬停绑定#info您的跨度不存在。我建议你使用上的mouseenter /鼠标离开与.on：

// 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>'); 
}); 

$('h1').on('mouseenter', '#info', function() { 
    $('#info img').attr('src', 'http://www.iconsdb.com/icons/preview/gray/info-2-xxl.png'); 
}); 

$('h1').on('mouseleave', '#info', function() { 
    $('#info img').attr('src', 'http://www.iconsdb.com/icons/preview/orange/info-xxl.png'); 
}); 

事件侦听希望事件冒泡到h1元素，这是当您创建的事件处理程序实际存在的对象。

Answer 4

Change 

$('#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'); 
    }); 

To: 

$('h1').on({ 
    mouseenter: function() { 
     $('#info img').attr('src', 'http://www.iconsdb.com/icons/preview/gray/info-2-xxl.png'); 
    }, 
    mouseleave: function() { 
     $('#info img').attr('src', 'http://www.iconsdb.com/icons/preview/orange/info-xxl.png'); 
    } 
}, '#info');