在線編輯側面圖標

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

這個例子對你有幫助嗎？請注意，我用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 2

您可能需要使用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(); 

}); 

Answer 3

添加一個容器周圍的.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/

希望這會幫助你。