Question

好的......我很困惑。所以我有一些字段旁边有一个小问号图标。当用户将鼠标悬停在问号上时，它会变为铅笔图标并显示内联工具提示。当用户点击图标时，会弹出一个模态来编辑内容。一切都按预期工作，除非点击图标，突然之后下面的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>

Answer 1

如果没有看到小提琴或其他内容，请尝试将overflow: hidden;添加到包含div（.field-wrapper）

Answer 2

我想通了......在javascript中深埋了另一个点击处理程序，所以我改变了悬停函数（它引入了附加了处理程序的类）：

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

一切都与世界是对的。谢谢大家的帮助！

点击时消失div

2 个答案: