內聯編輯，側面帶有圖標

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();

});