Question

我的问题是保持前置元素（glyphicon）与现有文本内联。

我有一个文本，当用户将鼠标悬停时，我会在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事件上）。图标从右向左滑动但不隐藏。

如何将glyphicon和text保留在一行中，以及为什么icon在mouseleave事件中不会消失？

Answer 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);
});

为了防止在新行中包装文本，make块会向左浮动：

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

内联滑动引导元素

1 个答案: