用javascript顯示/隱藏按鈕

我想通過下面的javascript使用「.widget」中的類「.edit-one-button」顯示/隱藏按鈕。但是，當我第一次加載頁面時，按鈕不會隱藏。任何想法可能會出錯？用javascript顯示/隱藏按鈕

<script type="text/javascript"> 
    $(function() { 
     $('.edit-one-button').hide(); 
     $('.widget').hover(function() { 
     $(this).find('.edit-one-button').fadeIn(100); 
     }, function() { 
     $(this).find('.edit-one-button').fadeOut(100); 
     }); 
    }); 
</script>

來源

2012-07-20 wcdomy

做懸停代碼的工作？ – 2012-07-20 16:26:14

好問題。那也不是。當我第一次加載該頁面時，該按鈕會顯示出來。懸停效果也不起作用... – wcdomy 2012-07-20 18:02:58

您是否包含jQuery庫？在錯誤控制檯中是否有任何Javascript錯誤？ – Guffa 2012-07-20 19:41:09

你也可以反向代碼，以便.edit-one-button有顯示的內嵌樣式：無然後在CSS懸停添加類像.active與display:block，而不是使用javascript負載隱藏。

.edit-one-button { 
    display:none; 
} 



$(function() { 
    $('.widget').hover(function() { 
    $('.widget .edit-one-button').fadeIn(100); 
    }, function() { 
    $('.widget .edit-one-button').fadeOut(100); 
    }); 
});

來源

2012-07-20 16:00:54

OP的代碼已經準備就緒。他們使用'$（fn）'版本，它與'$（document）.ready（fn）'相同。 – jfriend00 2012-07-20 16:07:14

仍然是一個好習慣。我提出的CSS解決方案也是相關的並且可行。 – 2012-07-20 16:08:31

代碼*已*在ready事件中。操作使用速記。 – Guffa 2012-07-20 16:08:57

用javascript顯示/隱藏按鈕

回答

相關問題