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

Question

pihachu @pihachu

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

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

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

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

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, спасибо вам ещё раз!

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

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

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

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

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

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

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

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

CSS

Простой
Поему не срабатывает стиль шрифта?
- 1 подписчик
- 20 окт.
- 131 просмотр
0

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

Средний
Почему появляется белая полоса справа при верстке сайта?
- 1 подписчик
- 19 окт.
- 124 просмотра
0

ответов
CSS

+1 ещё

Простой
Почему после изменений в css на сайте нет изменений?
- 1 подписчик
- 13 окт.
- 196 просмотров
3

ответа
CSS

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

ответ
HTML

+1 ещё

Простой
Как в руководстве steam сделать обтекающий картинку текст?
- 1 подписчик
- 08 окт.
- 125 просмотров
1

ответ
CSS

+2 ещё

Средний
Как решить проблему с появлением пустого пространства под drawer из shadcn?
- 2 подписчика
- 02 окт.
- 103 просмотра
1

ответ
HTML

+1 ещё

Средний
Скачал плагин image preview в вс коде, чтобы установить иконку сайта. Иконка появилась в браузере, но не появилась слева напротив строки. Почему так?
- 1 подписчик
- 30 сент.
- 146 просмотров
1

ответ
CSS

Простой
Как пофиксить визуальный глитч с border-radius и transparent + blur?
- 2 подписчика
- 26 сент.
- 154 просмотра
2

ответа
CSS

Простой
CSS3 как выбрать последние 4 элемента?
- 1 подписчик
- 25 сент.
- 207 просмотров
2

ответа
HTML

+1 ещё

Простой
От какой технической характеристики компьютера зависит скорость работы сайта, указанного ниже?
- 1 подписчик
- 24 сент.
- 451 просмотр
2

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

Верстальщик / фронтендер для браузерного расширения

DevTeam.Space

от 1 000 до 2 000 $

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Web-разработчик

ЭНДИ Консалтинг

от 40 000 до 40 000 ₽

<!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едведь

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

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

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

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

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

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