Как сделать прокрутку текста по горизонтали при наведении мышки?

Question

[ElvisP]

В блоке overflow: hidden текста. Как реализовать сдвиг текста при наведении курсора мыши?

Как реализовать сдвиг

<div class="name">
                <span class="menu-item"><a class="texturl">Когда очень хочется что бы скрытый текст двигался</a></span>
            </div>

.name {
    display: inline-block;
    width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.name:hover .menu-item {
    text-overflow: clip;
    transition: all 1s ease-out;
}

Answer 1

[GunAlv]

Этого можно добиться стилями https://codepen.io/GunAlv/pen/ExgMpBM

Comments

[ElvisP]

Да, тоже интересное решение. Тут есть одна проблема если текст укоротить до 1 слова то он при наведении курсора движется вправо. Мне нужно что бы ничего не происходило если текст помещается в блок и его видно.

[GunAlv]

ElvisP, В таком случае без JS не обойтись: https://codepen.io/GunAlv/pen/ExgMpBM

[ElvisP]

GunAlv, а если одинаковых классов несколько. Допустим так:

<a class="texturl">Когда очень хочется</a><a class="texturl">Когда очень хочется</a><a class="texturl">Когда очень хочется</a><a class="texturl">Когда очень хочется</a>

Как с таким быть?

[ElvisP]

Разобрался, просто присвоил span класс texturl и убрал у всех ссыок. Спасибо большое за помощь!

[ElvisP]

GunAlv, на сайте не работает - Uncaught ReferenceError: jQuery is not defined
at - ссылка из тега a. Хотя jQuery подключена везде где возможно.

[GunAlv]

ElvisP, Нужно смотреть в код проекта. В примере не используется JQuery, проблема не в нем

[ElvisP]

GunAlv, я уже все перепроверил, не понимаю в чем проблема. Даже банальное размещение скрипта перепробовал во всех местах. Uncaught TypeError: Cannot read property 'clientWidth' of null

[ElvisP]

GunAlv, Я нашел в чем проблема. Не знаю как это правильно описать. но попробую своими словами. JS код берет только первый texturl а остальные игнорирует. Т.е. если в первом элементе длинна больше заданной то срабатывает прокрутка. Если в первом элементе длинна удовлетворительная и текст виден а во втором текс не вмещается то ничего не работает. У меня элементов на странице полно. Что то вроде карточек продуктов. В одном ссылки вмещаются в другом нет. Что нужно откорректировать что бы работало по всей странице подскажите пожалуйста? Я ничего в JS не понимаю.

[ElvisP]

GunAlv, я сделал наглядный пример как у меня на сайте - https://codepen.io/d1mok/pen/NWRmELR

[ElvisP]

GunAlv, помогите пожалуйста!

[GunAlv]

ElvisP, Так найдите все нужные тексты https://codepen.io/GunAlv/pen/VwKOJZy

[ElvisP]

GunAlv, спасибо!

[nPocTo_4eJI]

ElvisP, столкнулся с тем же вопросом, как и у вас, поэтому хочу предложить доработанное решение.
Я избавился от необходимости использовать JS, привязав ограничение к переменной внутри css, что позволило сделать один шаблон для всех текстовых блоков и редактировать их с помощью дополнительных параметров css: https://codepen.io/nPocToI4eJI/pen/wvXNGQV

Answer 2

[Николай]

Самый простой вариант, остается подшаманить яваскриптом узнавать длину внутреннего блока, если конечно хочешь универсальную прокрутку для любого блока.

Codepen

Comments

[ElvisP]

У вас есть решение на js? У меня как раз часть текста длинная а часть короткая и короткий текст к примеру вообще крутить не нужно т.к. его видно, а вот длинный нужно.