JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="subcolumn-left-list-featured">
<li>
<a class="subcolumn-left-groups-avatar">ciao</a>
<span class="subcolumn-left-tab-title-slide"><a href="somelink.html">long text that needs to scroll</a></span>
<a class="subcolumn-left-income">+3</a>
</li>
<li>
<span class="subcolumn-left-tab-title-slide"><a href="somelink.html">long text that needs to scroll, long text that needs to scroll, long text that needs to scroll</a></span>
</li>
<li>
<span class="subcolumn-left-tab-title-slide"><a href="somelink.html">long text that needs to scroll, long text that needs to scroll, long text that needs to scroll</a></span>
</li>
</ul>
CSS
.subcolumn-left-list-featured{
width: 200px;
background:#FF0000;
margin-bottom:20px;
list-style-type:none;
padding:0;
}
.subcolumn-left-tab-title-slide {
height:20px;
background: silver;
overflow:hidden;
display:inline-block;
position: relative;
}
.subcolumn-left-tab-title-slide a {
position: relative;
white-space:nowrap;
left: 0px;
}
.subcolumn-left-groups-avatar{width:20px; display:inline-block;}
JavaScript
$(function(){
$('.subcolumn-left-list-featured li').mouseenter(
function () {
scrollText($(this));
}
).mouseleave(
function () {
stopScroll($(this));
}
);
var scrollText = function($el){
var scroller = $('.subcolumn-left-tab-title-slide a', $el);
scroller.animate({
left: -(scroller.width()-$el.width()+scroller.position().left)
}, 1000, function(){
scroller.css({
left: 0
});
scrollText($el);
})
}
var stopScroll = function($el){
$('.subcolumn-left-tab-title-slide a', $el).css({
left: 0
}).stop(true, false);
}
});