-2

好吧...我很困惑。所以我有一些字段旁边有一个小问号图标。当用户将鼠标悬停在问号上时，它会变为铅笔图标并显示内联工具提示。当用户点击图标时，应该会弹出一个模式来编辑内容。一切正常，除了单击图标时，以下 div 突然消失。但是，如果我注释掉该hover部分，则单击操作不会触发消失。我不明白如何在单击时激活悬停。（我对这一切都很陌生，因此非常感谢任何帮助/反馈——如果您看到我的代码有所改进，即使超出了我的问题范围）。谢谢！

这是我的代码：

$('.tooltip').hover(
        function() { 
            $(this).find($('.icon-pencil')).css("display", "inline");
            $(this).find($('.question-mark')).css("display", "none")
        },
        function() {
            $(this).find($('.icon-pencil')).css("display", "none");
            $(this).find($('.question-mark')).css("display", "inline");
        }
)

$('.tooltip').click(function(){
    var id      = $(this).attr('tooltip-id');
    var tip     = $(this).attr('data-tooltip');
    var target  = $('#tooltip-modal');
    $("#tooltip_id").val(id);
    $("#tooltip_body").val(tip);
    $.fancybox(target);

});

这适用于这些 div（其中两个具有相似的结构）：

<div class="field-wrapper">
    <label class="label">Client Account</label>
    <input id="clientaccount_name" value="<?php if(!empty($client_account)){ echo $client_account["name"]; } ?>" class="input autocomplate"></input>
    <a href="javascript:void(0)" class="small-top tooltip double-lines"  data-tooltip="<?php print(isset($tooltips['tooltip']['clientaccount_name']['desc']) ? $tooltips['tooltip']['clientaccount_name']['desc'] : 'n/a');?>" tooltip-id="<?php print(isset($tooltips['tooltip']['clientaccount_name']['id']) ? $tooltips['tooltip']['clientaccount_name']['id'] : 'n/a');?>"><span data-icon="&#xe014;" class="question-mark"></span><span class="icon-pencil"></span></a>
    <input id="clientaccount_id" type="hidden" name="clientaccount_id" value="<?php if(!empty($client_account)){ echo $client_account["id"];} ?>"></input>
</div>
<div class="field-wrapper">
    <label class="label">Client Short Code</label>
    <input id="client_shortcode" name="short_code" value="<?php echo $client_info["short_code"]; ?>" class="input small" maxlength="5"></input>             
    <a href="javascript:void(0)" class="small-top tooltip double-lines"  data-tooltip="<?php print(isset($tooltips['tooltip']['client_short_code']['desc']) ? $tooltips['tooltip']['client_short_code']['desc'] : 'n/a');?>" tooltip-id="<?php print(isset($tooltips['tooltip']['client_short_code']['id']) ? $tooltips['tooltip']['client_short_code']['id'] : 'n/a');?>"><span data-icon="&#xe014;" class="question-mark"></span><span class="icon-pencil"></span></a>                    
    <input id="old_shortcode" type="hidden" value="<?php echo $client_info["short_code"];?>" />
</div>
4

2 回答 2

0

在没有看到小提琴或其他东西的情况下，尝试添加overflow: hidden;到包含 div ( .field-wrapper)

于 2013-06-24T19:40:18.720 回答
-1

我想通了......在javascript深处还有另一个点击处理程序，所以我将悬停功能（它引入了附加处理程序的类）更改为：

$(this).find($('.icon-pencil')).css("display", "inline").unbind('click');

世界上一切都很好。感谢大家的帮助！

于 2013-06-24T21:42:46.273 回答