幻燈片引導元素內聯

我的問題是保持內嵌現有文本的前置元素（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事件上）。圖標從右向左滑動但不隱藏。

如何將字形和文本保留在一行中，並且爲什麼圖標在mouseleave事件中不會消失？

來源

2016-12-13 1_bug

是不是你想要的東西：HTTPS ：//jsfiddle.net/5ynbom72/ – Banzay

@Banzay：whoa：O Simpliest解決方案是最好的！請提供它作爲職位（而不是評論），然後我能夠作爲答案。謝謝！ :) –

你可以只在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; 
}

來源

2016-12-13 12:25:14 Banzay

幻燈片引導元素內聯

回答

相關問題