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

Question

pihachu @pihachu

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

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

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

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

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

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

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

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик: тариф PRO

10 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию

6 месяцев

Далее

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

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

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

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

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

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

HTML

+1 ещё

Простой
Как свг заменить на фон?
- 1 подписчик
- 08 мая
- 176 просмотров
1

ответ
HTML

+1 ещё

Простой
Чем препроцессить в HTML сокращения?
- 2 подписчика
- 04 мая
- 236 просмотров
1

ответ
CSS

Простой
Filter: blur() размывает края при градиентном размытие?
- 1 подписчик
- 03 мая
- 115 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 299 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как обновлять данные массива, чтобы по нажатию на кнопку на странице добавлялся еще один элемент массива?
- 3 подписчика
- 12 апр.
- 731 просмотр
4

ответа
JavaScript

+1 ещё

Простой
Почему не работает код из js файла?
- 3 подписчика
- 12 апр.
- 687 просмотров
4

ответа
HTML

+1 ещё

Простой
Беда с input. Как избавиться от выделения заполненного поля?
- 2 подписчика
- 31 мар.
- 348 просмотров
1

ответ
HTML

Простой
Как сделать так, чтобы в браузерах код html не показывался в квадратиках?
- 4 подписчика
- 26 мар.
- 684 просмотра
3

ответа
HTML

Простой
Как сделать деплой проекта, статического сайта сделанного на чистом html у которого нет баз данных?
- 1 подписчик
- 26 мар.
- 259 просмотров
3

ответа
HTML

+1 ещё

Простой
Как менять тему письма при рассылке на почту в зависимости от темы устройства?
- 2 подписчика
- 25 мар.
- 263 просмотра
1

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

Frontend-разработчик (vanilla JS, high-load)

Karma8

от 200 000 ₽

Специалист тех поддержки (английский язык, смены с 16:00 до 00:00 Мск)

ТехСофт

от 50 000 ₽

Разработчик JavaScript/NodeJS, специалист технической поддержки

A-Parser

от 800 до 800 $

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

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

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

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

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

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

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