滑动引导元素内联答案

【问题标题】：Slide bootstrap element inline滑动引导元素内联
【发布时间】：2016-12-13 11:41:20
【问题描述】：

我的问题是将前置元素（字形图标）与现有文本内联。

我有一个文本，当用户悬停它时，我会在 JQuery UI 1.10.2 中添加带有幻灯片效果的图标。但前置图标将我的文本推到新行。

这是我的html：

<div class="hover-me">
  <h4>My title</h4>
</div>

还有 jQuery：

$('.hover-me').hover(function() {
     $('<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="display: none; font-size: 15px;"></span>&nbsp;').prependTo($(this).find('h4')).toggle('slide', { direction: 'left' }, 400);
}, 
function() {
    $(this).find('.glyphicon').hide().toggle('slide', { direction: 'right' }, 400);
});

我在JSFiddle也做了一些例子。

第二个问题是隐藏效果（在 mouseleave 事件上）。图标从右向左滑动但不隐藏。

如何将字形和文本保持在一行，为什么图标在 mouseleave 事件中不消失？

【问题讨论】：

是你想要的吗：jsfiddle.net/5ynbom72
@Banzay：哇 :O 最简单的解决方案是最好的！请将其作为帖子（不发表评论）提供，然后我可以将其作为答案。谢谢！ :)

标签： jquery html css twitter-bootstrap jquery-ui

【解决方案1】：

您可以在 html 中定义 gliphicon：

<div class="hover-me">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="display: none; font-size: 15px; line-height: 35px;"></span>&nbsp;<h4>My title</h4>
</div>

$('.hover-me').mouseenter(function() {
     $(this).find('.glyphicon').show('slide', { direction: 'left' }, 400);
});
$('.hover-me').mouseleave(function() {
    $(this).find('.glyphicon').hide('slide', { direction: 'right' }, 400);
});

为了防止在新行中换行使块向左浮动：

.hover-me span, .hover-me h4{
  display: block;
  float: left;
}

【讨论】：