Question

大家好我在tool tip时展示hover and click的示例。我找到了很多例子，但我选择以下做

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

现在我的问题是我想将click and hover函数合并在一起，这样当用户点击close图标时，如果不是hide则会显示..

任何人都可以帮助我

Answer 1

如果我理解正确，您可以在元素/选择上链接功能，以便您可以执行类似

的操作

$('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();
});

Answer 2

如果我在清晰的描述中清楚地理解：

这两个事件都会触发相同的代码并且必须同时可用。 事件将对彼此起作用，因此您必须在代码中添加isClicked布尔值。

仅在onclick事件中显示关闭按钮，并在同一事件中将isClicked设置为true。在关闭按钮的onclick中再次隐藏它并将isClicked设置为false。

将鼠标悬停事件中的悬停事件分成两个子部分（鼠标悬停和鼠标悬停），检查isClicked变量并仅在未单击时隐藏工具提示。

Answer 3

您可以使用javascript onmouseover来检测鼠标何时在元素上，然后显示close元素。从close元素（即新显示的）连接click事件以完成点击逻辑。

Answer 4

你应该做一些像

这样的事情

<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>

如何将点击和悬停功能结合在一起

4 个答案: