Плавающий наложение текста при наведении изображения

-1

Что я пытаюсь сделать: когда пользователь наводится на любое изображение на определенной странице, появляется элемент с плавающим полем, отображающий заголовок изображения (тег html title = ""). Когда пользователь перемещает курсор по изображению, элемент окна перемещается вместе с ним.Плавающий наложение текста при наведении изображения

(пример: http://minecraft.gamepedia.com/Glass_Bottle - Если вы ищете раздел «обработка», зависание над определенными изображениями отображает окно с его названием - Извините, это был единственный пример, который я мог найти).

Возможно ли достичь этого результата с использованием необработанного HTML или требуется ли css или дополнение, такое как Javascript/Jquery?

Извините, если я не был достаточно ясен - если вам нужна определенная информация, пожалуйста, дайте мне знать!

Заранее благодарю, и я надеюсь, что у всех есть С Новым годом! :)

источник

2016-01-03 Ash

Добро пожаловать в Переполнение стека! Ожидается, что вы, по крайней мере, попытаетесь закодировать это для себя. Stack Overflow не является службой записи кода. Я бы предположил, что вы проводите дополнительные исследования, либо через Google, либо путем поиска SO, сделайте попытку и. если у вас все еще есть проблемы, вернитесь ** с кодом ** и объясните, что вы пробовали, и почему это не сработало. –

Привет, Paulie. Спасибо, но я не новичок. Я понимаю это - я только что попробовал что-то, и опубликую свой код, и расскажу, что я пытался сделать, ожидаемый результат и фактический результат. Я надеюсь, что мое редактирование отменит downvote:/Спасибо за головы, хотя и счастливый новый год. – Ash

Это невозможно сделать без JS ... CSS не имеет способа следовать за позицией курсора. –

Я думаю, вам нужен javascript. Я не думаю, что вы получите все, что захотите, в HTML5. Вы хотите использовать событие mouseover для отображения изображения рядом с курсором, что означает, что вам придется плавать div рядом с ним. Движущаяся часть не будет проблемой, потому что вы, вероятно, просто переустановите ее для каждой мыши, над которой будет срабатывать каждый раз, когда они перемещают курсор, я думаю. Вот проблемы, которые вы должны решить. Выведите по одному за раз.

1) How to float a div at a higher z index with the title in it. 
2) How to know the coordinates of your curser 
3) Move the div to your cursor coordinates with an offset 
4) How to hide the div

источник

2016-01-03 05:39:18 javaMoca

Привет, javaMoca - спасибо, что сломал проблему в этом наборе шагов. Это все относительно новое для меня, так как вы думаете, что сможете предоставить мне определенный набор ресурсов? Я изучаю каждый шаг на данный момент - я буду держать вас в курсе! Благодаря :) – Ash

Я использовал это несколько месяцев назад, и помог мне с той же проблемой:

http://notlaura.com/show-title-hovering-image/

Надеется, что это помогает вам, как хорошо,

Эндрю

источник

2016-01-03 05:24:44

Спасибо, что поделились этим, Андрей - отлично! Однако, используя это, заголовок появляется внутри изображения. Есть ли способ вырваться из этого и получить заголовок в отдельном плавающем поле вне изображения? – Ash

https://jsfiddle.net/fb9wy32c/1/ Это может быть не лучшее решение для вас, но таким образом вы можете легко разместить заголовок в любом месте, хотя это не будет зависеть от положения курсора. –

Это выглядит великолепно до сих пор, еще раз спасибо за ответ Andrew! Просто последнее: как бы я получил нижний левый угол этой плавающей коробки текста, чтобы «прикрепить» себя к кончику курсора пользователя, когда они перемещаются по изображению? – Ash

Плавающий наложение текста при наведении изображения

ответ

Смежные вопросы