使用JS顯示懸停文字

我嘗試了一個CSS解決方案，但不起作用（我相信這是我使用的軟件或服務器的錯誤）。現在尋找java解決方案。使用JS顯示懸停文字

簡單地說，我希望文字顯示在懸停。

下面是我想出的，但它不會工作（我是小白）....

<DIV class="spire-menu"> 
    <DIV class="menu-item">Hello1</DIV> 
    <DIV>Hello2</DIV></DIV>

的計劃是有Hello2 perminantly顯示。 Hello1只會在懸停時顯示。

$(".spire-menu").hover(function() { 
    $(this).find('.menu-item').show(); 
}, function() { 
    $(this).find('.menu-item').hide(); 
});

來源

2013-07-13 Bainn

如果像[** this **]（http://jsfiddle.net/aZ2qY/）這樣簡單的東西不能工作，是什麼讓你認爲jQuery會？ – adeneo

@adeneo：因爲jQuery做所有事情。 – Blender

@Blender - 哦，忘了那部分，即使它很明顯！ – adeneo

CSS最好用來代替JQuery。但是，如果它不能正常工作，這裏是JQuery的解決方案

<div class="spire-menu"> 
    <DIV class="menu-item" style="display:none;">Hello1</DIV> 
    <DIV style="position:absolute;top:25px;">Hello2</DIV> 
</div>

的jQuery：

$(function(){ 
    $(".spire-menu").hover(function(){ 
     $(this).find(".menu-item").fadeIn(); 
    } 
        ,function(){ 
         $(this).find(".menu-item").fadeOut(); 
        } 
        );   
});

Here's the working Demo

希望它會爲你工作。

來源

2013-07-13 04:53:15

偉大的工作@Shiju。只有我需要的修改是文本需要保持原來的位置，而不是與隱藏/顯示上下顛簸。非常感謝你的幫助！ – Bainn

然後定位你的div。查看更新。此外，我已更新工作演示。你可以根據你的需要設置div的位置。 –

使用JS顯示懸停文字

回答

相關問題