JQuery schweben heraus nicht mit .html

Question

Im Probleme mit einem Jquery Funktion

Arbeits Geige hier

https://jsfiddle.net/kb9yn2kh/

<div class="menu"> 
    <h1> 
    Menu 
    </h1> 
</div> 

jquery

$('.menu').hover(function(){ 
    $(this).html('<h1>close</h1>') 
}, function(){ 
    $(this).html('<h1>menu</h1>') 
}) 

im Grunde Ich arbeite versuchen um das innere HTML zu ändern schweben und dann ändern Sie es zurück, wenn Sie schweben, aber ich kann nicht scheinen, um es auf den Schwebebalken zu ändern ..

jede Hilfe wäre willkommen! Im

bewusst gibt es ähnliche Fragen, aber keine, die .html-Adresse()

Answer 1

Sie können dieses Problem beheben, indem Sie eine Eigenschaft height auf Ihrem .menu Element festgelegt wird: (fiddle)

.menu { 
    height: 50px; 
} 

Oder statt Wenn Sie das HTML-Element jedes Mal ersetzen, können Sie einfach den darin enthaltenen Text ersetzen: (fiddle)

$('.menu').mouseover(function(){ 
    $(this).find('h1').text('close'); 
}).mouseout(function() { 
    $(this).find('h1').text('Menu'); 
}); 

Answer 2

Versuchen Sie, mouseover und mouseout mit Kindern des Elements zu verwenden.

$('.menu').mouseover(function(){ 
     $(this).children('h1').text('close'); 
    }).mouseout(function() { 
     $(this).children('h1').text('Menu');; 
    });