如何將點擊和懸停功能結合在一起

大家好，我正在做一個tool tip的例子，當hover and click。我發現很多例子，但我選擇了下面做如何將點擊和懸停功能結合在一起

http://ara-abcarians.com/jquery/atooltip/#demos

現在我的問題，我想這兩個click and hover功能結合在一起，這樣，當用戶點擊該圖標close應該顯示如果沒有hide ..

任何一個可以幫助我

來源

2012-01-18 Chaitanya

對不起 - 我在您的演示了一下，我不完全相信你「問。你能澄清一下嗎？ – 2012-01-18 11:54:53

我想在單個事件中結合「懸停」和「點擊」。所以，當用戶'hover'i想要提出關閉按鈕的工具提示。如果用戶點擊我想用關閉按鈕顯示工具提示。意思是我想按照例子 – Chaitanya 2012-01-18 11:58:04

class =「clickTip normalTip」添加這兩個類到anchor – Neha 2012-01-18 12:02:24

如果我理解正確的話，你可以在一個元素/選擇剛剛鏈功能，這樣你就可以這樣做

$('p').click(function() { 
    alert($(this).text()); 
}).hover(function(){ 
    $(this).css('background', 'red'); 
});

顯然你可以根據自己的需要調整這個例子，爲了避免重複，你也可以考慮編寫一個sperate函數並在事件中調用它，你可能必須傳遞給它的將是$(this)。

編輯：用多一點的考慮，你可以這樣做this

var bar = $('#bar'); 

$('#foo').click(function() { 
    bar.toggle();  
}).mouseover(function() { 
    bar.show(); 
}).mouseout(function() { 
    bar.hide(); 
});

編輯：更全面推行什麼，我相信OP請求demo

var bar = $('#bar'); 

$('#foo').click(function() { 
    $(this).unbind('mouseout');  
}).mouseover(function() { 
    bar.show(); 
}).mouseout(function() { 
    bar.hide(); 
}); 

$('#close').click(function() { 
    $('#foo').bind('mouseout', function() { 
     bar.hide(); 
    }); 
    $(this).parent().hide(); 
});

來源

2012-01-18 11:59:25

單獨做'1和3'這樣做是否夠用？如果即使點擊鼠標，也會用鼠標離開該元素，鼠標會再次隱藏工具提示。這兩個選項仍然會顯示關閉按鈕，而主題啓動器引用的是一個沒有關閉按鈕的情況下顯示懸停選項的示例，以及帶有一個的單擊事件。單擊的工具提示僅在關閉按鈕被點擊時消失。 – Rickjaah 2012-01-18 13:05:23

這更像是一個演示，然後是一個完全合格的實現 – 2012-01-18 14:01:31

基本事件鏈的演示？ – Rickjaah 2012-01-18 14:05:54

如果我在明確的描述中沒有正確理解：

這兩個事件將觸發相同的代碼，並且必須同時可用。 這些事件將對抗eachother，所以你必須添加一個isClicked布爾到你的代碼。

僅在onclick事件中顯示關閉按鈕，並在同一事件中將isClicked設置爲true。在close按鈕的onclick中再次隱藏它，並將isClicked設置回false。

將鼠標懸停事件拆分爲mouseout事件中的兩個子部分（mouseover和mouseout），檢查isClicked變量並僅隱藏工具提示（如果未單擊）。

來源

2012-01-18 11:59:55 Rickjaah

您可以使用javascript onmouseover來檢測鼠標何時位於該元素上，然後顯示關閉元素。連接close元素（新顯示的）的click事件以完成您的點擊邏輯。

來源

2012-01-18 12:00:47

-1

你應該做一些事情像

<script type="text/javascript"> 
$(document).ready(function() 
{  
$('#foobar9').bind('mouseover click',function(e) {   
if(e.type == 'click'){   
var close = true   
} 
else 
{   
var close = false   
}});

或簡單的解決方法是

<li><a href="#" class="normalTip clickTip exampleTip" title="Hello, I am aToolTip">Normal Tooltip</a> - This is a normal tooltip with default settings.</li>

來源

2012-01-18 12:03:12 Dotnet

如何將點擊和懸停功能結合在一起

回答

相關問題