Как СКРЫТЬ тайтл при наведении курсора, но оставить его в принципе?

Question

pihachu @pihachu

Как СКРЫТЬ тайтл при наведении курсора, но оставить его в принципе?

Добрый день. Как скрыть тайтл картинок при наведении курсора, но не удалять его в целом?
https://i.gyazo.com/5dc20ada3a1f899f4869438ea5f993... (картинка не моя)

UPD. Для вордпреса, без плагинов и для всех отображаемых изображений одновременно. Но самое главное, чтобы для поисковых роботов тайтл не пропадал.

Вопрос задан более трёх лет назад
1167 просмотров

17 комментариев

Подписаться 3 Простой 17 комментариев

fixeri @fixeri

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css"></style>
</head>
<body>
    <img class="hh" title="Photo of my holiday" src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">

    <script type="text/javascript">
        "use strict";
        
        document.querySelector("img").onmouseover = function(e) {
        	let elem = e.target;
        	elem.setAttribute("data-title", elem.getAttribute("title"));
        	elem.removeAttribute('title');
        };

        document.querySelector("img").onmouseout = function(e) {
        	let elem = e.target;
        	elem.setAttribute("title", elem.dataset.title);
        	elem.removeAttribute('data-title');
        };
    </script>
</body>
</html>

Написано более трёх лет назад

pihachu @pihachu Автор вопроса

fixeri, спасибо, способ рабочий, только я забыл уточнить, что нужно это для вордпреса и для всех изображений сразу. И самое главное, чтобы для поисковиков тайтл не удалялся.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Я можно спрошу, в alt и title текст разный?

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, title - это имя самой картинки, alt - не задавал. Именно в настройках картинки (уже на сайте) и title, и alt оставил пустыми.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

pihachu, разумнее заполнить alt.
Всем будет хорошо.
- поисковики всё поймут
- скринридеры всё поймут
- вот эти все ваши заморочки с тайтл напишу, но не покажу, будут не нужны.

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, alt вместо title, т.е. title удалять?

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

pihachu, вы же не собираетесь использовать его по назначению, значит удалять

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, так просто)) Всё работает. Спасибо атдушиии! Так а для чего же тогда нужен тайтл вообще? Просто как подсказка для пользователя?

Написано более трёх лет назад
wisgest @wisgest

pihachu, Ankhena, какие поисковые системы обращают внимание на title, где об этом сказано (всегда был alt)?

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

pihachu, угу. И об этом написано в спецификации ;)

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

wisgest,
какие поисковые системы обращают внимание на title, где об этом сказано (всегда был alt)?

Всегда было и то и другое, а не только alt.
Написано об этом в хелпе поисковых систем, например, Яндекс

Но если текст в title будет дублировать текст в alt, то смысла его указывать не будет никакого.
А поскольку большинство не в состоянии сделать вменяемым даже alt, то про title можно не начинать думать.

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, так поисковый робот всё таки обращает внимание на title? И у двух одинаковых сайтов, он предпочтение отдаст тому сайту, где заполнены и alt, и title, а не только alt?

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

pihachu, я, конечно, не отвечу за действие поисковика. но задам еще один каверзный вопрос для понимания: по какой фразе, по той что в alt или по той, что в title?

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, ну я уже понял, что alt это прямое попадание для поисковика, но может для "пущей выдачи" поисковики как-то суммируют эти два тега?

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, или вы имеете в виду, что если поисковик обнаруживает заполненный тег alt, то дальше и не сканирует?

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

pihachu,
но может для "пущей выдачи" поисковики как-то суммируют эти два тега?

Может.
Наверное, вам всё таки имеет смысл перейти по ссылке и почитать хелпы. И найти аналогичный гугловский и его тоже почитать. Там много всего интересного и не только про альты с тайтлами.
Не думаю, что кто-то захочет копировать их содержимое сюда. Я точно не захочу.

Написано более трёх лет назад
pihachu @pihachu Автор вопроса

Ankhena, спасибо вам ещё раз!

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 2 часа назад
- 23 просмотра
0

ответов
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- 3 часа назад
- 70 просмотров
0

ответов
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 12 часов назад
- 79 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 22 часа назад
- 108 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 78 просмотров
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 67 просмотров
1

ответ
Вёрстка

+1 ещё

Простой
Как правильно должна масштабироватся верстка сайта на десктопе?
- 1 подписчик
- вчера
- 94 просмотра
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 33 просмотра
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 70 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 107 просмотров
0

ответов
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Вёрстка страницы Битрикс

23 дек. 2024, в 13:17

10000 руб./за проект

Разработать ТГ-бота для транскрибации аудио в текст + chatgpt

23 дек. 2024, в 13:02

5000 руб./за проект

ML-инженер для интеграции нескольких моделей искусственного интеллект

23 дек. 2024, в 12:45

5000 руб./за проект

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"></style> </head> <body> <img class="hh" title="Photo of my holiday" src="http://dummyimage.com/200x200/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image"> <script type="text/javascript"> "use strict"; document.querySelector("img").onmouseover = function(e) { let elem = e.target; elem.setAttribute("data-title", elem.getAttribute("title")); elem.removeAttribute('title'); }; document.querySelector("img").onmouseout = function(e) { let elem = e.target; elem.setAttribute("title", elem.dataset.title); elem.removeAttribute('data-title'); }; </script> </body> </html>
fixeri, спасибо, способ рабочий, только я забыл уточнить, что нужно это для вордпреса и для всех изображений сразу. И самое главное, чтобы для поисковиков тайтл не удалялся.
Я можно спрошу, в alt и title текст разный?
Ankhena, title - это имя самой картинки, alt - не задавал. Именно в настройках картинки (уже на сайте) и title, и alt оставил пустыми.
pihachu, разумнее заполнить alt.
Всем будет хорошо.
- поисковики всё поймут
- скринридеры всё поймут
- вот эти все ваши заморочки с тайтл напишу, но не покажу, будут не нужны.
Ankhena, alt вместо title, т.е. title удалять?
pihachu, вы же не собираетесь использовать его по назначению, значит удалять
Ankhena, так просто)) Всё работает. Спасибо атдушиии! Так а для чего же тогда нужен тайтл вообще? Просто как подсказка для пользователя?
pihachu, Ankhena, какие поисковые системы обращают внимание на title, где об этом сказано (всегда был alt)?
pihachu, угу. И об этом написано в спецификации ;)
wisgest,
какие поисковые системы обращают внимание на title, где об этом сказано (всегда был alt)?

Всегда было и то и другое, а не только alt.
Написано об этом в хелпе поисковых систем, например, Яндекс

Но если текст в title будет дублировать текст в alt, то смысла его указывать не будет никакого.
А поскольку большинство не в состоянии сделать вменяемым даже alt, то про title можно не начинать думать.
Ankhena, так поисковый робот всё таки обращает внимание на title? И у двух одинаковых сайтов, он предпочтение отдаст тому сайту, где заполнены и alt, и title, а не только alt?
pihachu, я, конечно, не отвечу за действие поисковика. но задам еще один каверзный вопрос для понимания: по какой фразе, по той что в alt или по той, что в title?
Ankhena, ну я уже понял, что alt это прямое попадание для поисковика, но может для "пущей выдачи" поисковики как-то суммируют эти два тега?
Ankhena, или вы имеете в виду, что если поисковик обнаруживает заполненный тег alt, то дальше и не сканирует?
pihachu,
но может для "пущей выдачи" поисковики как-то суммируют эти два тега?

Может.
Наверное, вам всё таки имеет смысл перейти по ссылке и почитать хелпы. И найти аналогичный гугловский и его тоже почитать. Там много всего интересного и не только про альты с тайтлами.
Не думаю, что кто-то захочет копировать их содержимое сюда. Я точно не захочу.

Answer 1 · 2020-01-06 16:16:55

WP Panda @wppanda5

WordPress Mедведь

Ответ написан более трёх лет назад

Комментировать

Как СКРЫТЬ тайтл при наведении курсора, но оставить его в принципе?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт