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

Question

pihachu @pihachu

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

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

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

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

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 недели

Далее
Бруноям

Вёрстка на HTML и CSS

3 месяца

Далее

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

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

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

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

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

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

CSS

Простой
Как найти в DOM-элементе блоки (div), которые имеют ширину больше, чем их родительский элемент (td) средставми CSS?
- 1 подписчик
- 12 дек.
- 85 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как можно реализовать что то вроде селекта внутри родителя у которого есть скрытые элементы и должна быть горизонтальная прокрутка?
- 1 подписчик
- 11 дек.
- 123 просмотра
0

ответов
CSS

Простой
Как сделать “арочный” блок адаптивным?
- 1 подписчик
- 11 дек.
- 178 просмотров
0

ответов
CSS

Простой
Как сделать вырез снизу без задания цвета?
- 1 подписчик
- 11 дек.
- 84 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как сделать резкое переключение слайдов?
- 1 подписчик
- 03 дек.
- 171 просмотр
0

ответов
JavaScript

+2 ещё

Простой
Элемент стилизации на js, как сделать чтобы не было резкой смены картинки фона?
- 1 подписчик
- 27 нояб.
- 215 просмотров
1

ответ
HTML

+1 ещё

Средний
В какую сторону копать решение чтобы решить проблему с наложением?
- 1 подписчик
- 22 нояб.
- 142 просмотра
0

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

+2 ещё

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

ответа
HTML

+1 ещё

Простой
Как растянуть вложенный блок внутри других блоков на максимальную длину, но не более чем на ширину страницы?
- 1 подписчик
- 21 нояб.
- 145 просмотров
0

ответов
CSS

Простой
Как сверстать кастомную пунктирную обводку у блока?
- 1 подписчик
- 17 нояб.
- 240 просмотров
2

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

WordPress (PHP, HTML/CSS) разработчик

Epiic

от 90 000 ₽

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

Karma8

от 200 000 до 300 000 ₽

Frontend разработчик React / Next.js

PurpleSchool

До 65 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едведь

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

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

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

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

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

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