圖片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');