Як зберегти значення видимості назви після натискання?

Розглянемо наступну розмітку HTML:


У виводі, коли користувачі наводять на зображення, значення атрибута заголовка відображається у спливаючому вікні. Це гарна ідея для відображення інформації для користувачів.

Але ця інформація зникає, коли користувачі натискають зображення (зауважте, що користувачі можуть натискати, а не натискати)

Що я можу зробити (наприклад, використовуючи jQuery), щоб інформація була видимою (навіть якщо користувач натискає), наскільки вказівник миші знаходиться на зображенні?

Я спробував наступне, але це не вирішило цю проблему:

jQuery('img[src="info.png"]').click(function(event){
    event.preventDefault();
        });

EDIT : Are there any way to do "clicking is equal to hovering" in jQuery?

2

2 Відповіді

Вам доведеться створити власну підказку.


Password should contain 6-10 characters

Вам не потрібен JavaScript, достатньо чистого CSS:

img[src=info.png] + span {
    display: none;
}
img[src=info.png]:hover + span {
    display: inline;
}

Edit: If you don't want to touch your HTML, you can create the tooltips with script. Here's a jQuery example:

var img = $("img[src=info.png]");
$("").text(img.attr("title")).insertAfter(img);
img.attr("title", "");
2
додано
Звучить добре, але чи можна змінити цю ідею, не змінюючи розмітку HTML?
додано Автор siva636, джерело
Проблема полягає в тому, щоб розмістити та стиснути вміст .
додано Автор siva636, джерело
Ви можете зробити це за допомогою сценарію. Я оновлю свою відповідь на прикладі.
додано Автор gilly3, джерело
Я не розумію Ви запитуєте, як стиль проміжку? Використовуйте вказаний вище CSS та додайте атрибути стилю, коли це необхідно. Чи можете ви бути більш конкретними?
додано Автор gilly3, джерело

Відображення img title s або a link залежить від браузера, і у вас є не контролювати його. Якщо ви хочете мати власну поведінку і переконатися, що ця поведінка є крос-браузером, вам потрібно:

  1. позбутися поведінки веб-переглядача за умовчанням, видаливши всі title і alt атрибути
  2. повторно виконайте свої власні підказки за допомогою одного з багатьох бібліотеки доступні

Удачі

1
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram