在线编辑侧面图标

我正在尝试为新项目创建一个内嵌编辑插件，我正在研究。它应该很容易。只是文本一侧的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(); 
});

的问题是，我无法点击在图标上，因为在我将鼠标放到它上面之前它会被隐藏。如何在鼠标悬停在文字或图标上时保持其可见状态？

来源

2015-08-08 sveatlo

安装工作片段，它会很容易向你展示如何解决 – Amit

这个例子对你有帮助吗？请注意，我用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

来源

2015-08-08 20:49:14 Tarek

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

});

来源

2015-08-08 20:44:15 MazzCris

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

希望这会帮助你。

来源

2015-08-08 20:46:11 DFayet

在线编辑侧面图标

回答

相关问题