Вопрос или проблема
Я хотел бы скрыть атрибут заголовка изображения при наведении на изображение, так как он не нужен на моем сайте. Я попробовал следующий код и добавил его выше закрывающего </head> в header.php, но он не работает.
Мне не нужно загружать плагин, чтобы этого достичь. Атрибут заголовка не имеет влияния на SEO, поэтому не должно быть проблемы с его скрытием.
Может кто-то подсказать, почему мой скрипт не работает и что я могу сделать, чтобы он заработал, пожалуйста?
Вот код, который я попробовал в своем header.php выше закрывающего </head>
<script>
jQuery(document).ready(function($) {
$('img').hover(function()
{ $(this).removeAttr('title'); });
});
</script>
Проверьте ошибки в консоли, нажав F12, ваш код правильный, но WordPress иногда не понимает $, используйте jQuery вместо $.
<script>
jQuery(document).ready(function($) {
jQuery('img').hover(function() {
jQuery(this).removeAttr('title');
});
});
Не нужно использовать jQuery. Сущее CSS может это сделать:
imgHide Title tag on image Hover
,img:hoverHide Title tag on image Hover
{
opacity:0; /* оба варианта работают, выбирайте тот, который вам нравится */
display:none;
}
Установите CSS-свойство pointer-events в none.
img {
pointer-events: none;
}
Ответ или решение
Для скрытия атрибута title у изображений при наведении курсора, есть несколько подходов, которые можно использовать без установки дополнительных плагинов.
1. Использование jQuery
Если вы хотите использовать jQuery, убедитесь, что код написан правильно и библиотека jQuery подключена на вашем сайте. Важно помнить, что иногда WordPress может не распознавать символ $, поэтому лучше использовать полное имя jQuery. Вот исправленный код:
<script>
jQuery(document).ready(function($) {
jQuery('img').hover(function() {
jQuery(this).removeAttr('title');
});
});
</script>Убедитесь, что этот код размещен перед закрывающим тегом </head> в header.php.
2. Использование чистого CSS
Если вы хотите полностью избежать использования JavaScript, можно попробовать CSS. Однако CSS не может непосредственно скрыть атрибут title, так как он не влияет на отображение элемента. Но некоторые трюки могут помочь:
img:hover {
opacity: 0; /* Скрывает изображение при наведении */
display: none; /* Или полностью убирает изображение с экрана */
}Заметьте, что это не совсем то, что вам нужно, поскольку это также скрывает само изображение, а не только текст в title.
3. Установка CSS для pointer-events
Другой способ – это отключить взаимодействие с изображениями с помощью свойства CSS:
img {
pointer-events: none;
}Однако этот код предотвратит любое взаимодействие с изображениями, включая клики, что может быть нежелательным.
Заключение
Если вы хотите просто скрыть атрибут title, то использование jQuery является наиболее подходящим решением, если у вас уже подключён jQuery на сайте. Убедитесь, что код выполняется корректно и библиотека подключена правильно. Если же вы хотите таблетки без JavaScript, возможно, вам нужно будет пересмотреть архитектуру вашего HTML и убрать атрибут title с изображений на этапе их создания.
Если у вас возникнут дополнительные вопросы, не стесняйтесь спрашивать!