Question

我正在尝试为新项目创建内联编辑插件，我正在努力。应该很容易。文本旁边只有一个fa-pencil图标，应该进行编辑。目前我已经像这样（简化）获得了HTML：

<div class="inline-edit-icon">
    <i class="fa fa-pencil"></i>
</div>
<div class="inline-edit">
    <p id="doctor-info-text" class="inline-edit-text">{{userInfo.description}}</p>
    <textarea class="form-control inline-edit-input" ng-model="userInfo.description"></textarea>
</div>

我通过jQuery触发.inline-edit-icon div的可见性：

$('.inline-edit-text').hover(function(e){
    var coordinates = $(this).offset();

    $('.inline-edit-icon').css('top', coordinates.top);
    $('.inline-edit-icon').css('left', coordinates.left - $('.inline-edit-icon').width());
    $('.inline-edit-icon').show();
}, function(){
    $('.inline-edit-icon').hide();
});

问题是，我无法点击图标，因为它在我拿到鼠标之前被隐藏了。当鼠标悬停在文本或图标上时，如何让它保持可见？

Answer 1

在.inline块周围添加一个容器，然后触发悬停在其上。

类似的东西：

<div class="inline-container">
    <div class="inline-edit-icon">
        <i class="fa fa-pencil">o</i>
    </div>
    <div class="inline-edit">
        <p id="doctor-info-text" class="inline-edit-text">{{userInfo.description}}</p>
        <textarea class="form-control inline-edit-input" ng-model="userInfo.description"></textarea>
    </div>

</div>

和脚本部分：

$('.inline-container').hover(function(e){
    var coordinates = $(this).children('.inline-edit').offset();
    var $icon = $(this).children('.inline-edit-icon');

    $icon.css('top', coordinates.top);
    $icon.css('left', coordinates.left - $icon.width());
    $icon.show();

}, function(){
    $('.inline-edit-icon').hide();
});

工作小提琴：http://jsfiddle.net/qej24s5m/

希望它会帮助你。

Answer 2

这个例子对你有帮助吗？请注意我使用HTML和CSS所做的更改：

$('.inline-edit-text, .fa-pencil').hover(function(e){
    var coordinates = $(this).offset();
console.log(coordinates)
    //$('.inline-edit-icon').css('top', coordinates.top);
    //$('.inline-edit-icon').css('left', coordinates.left);
    $('.inline-edit-icon').show();
}, function(){
    $('.inline-edit-icon').hide();
});

JSFiddle

Answer 3

您可能希望使用mouseenter和mouseleave个事件：

$('.inline-edit-text, .fa.fa-pencil').on('mouseenter',function(e){
    var coordinates = $(this).offset();
    $('.inline-edit-icon').css('top', coordinates.top);
    $('.inline-edit-icon').css('left', coordinates.left - $('.inline-edit-icon').width());
    $('.inline-edit-icon').show();
});


$('.inline-edit-text, .fa.fa-pencil').on('mouseleave',function(e){
    $('.inline-edit-icon').hide();

});

带边框图标的内联编辑

3 个答案: