Я пытался найти здесь много разных ответов на этот вопрос и попытался использовать их решения, но, похоже, это не сработало, например это решение: Можно ли скрыть заголовок href?
У меня вопрос: как я могу скрыть всплывающую подсказку атрибута заголовка, когда пользователь наводит курсор на картинку? Я пробовал использовать <span title=" ">text</span>, но во всплывающей подсказке заголовка отображался только пробел или атрибут заголовка диапазона.
Вот мой веб-сайт.
Я придумал ответ на свой вопрос. Спасибо, Герт Джи, за то, что заставили меня начать! знак равно
Чтобы скрыть атрибут заголовка, я сначала поместил все в цикл, потому что в противном случае он возьмет заголовок первой ссылки и применит его к нажатой картинке:
$("a[rel='portfolio']").each(function(e) {
}
Затем я объявил переменную, которая содержит заголовок всех элементов, к которым вы хотите применить их:
var title = $(this).attr("title");
После того, как я объявил переменную, я затем создал функцию, которая скрывает заголовок при наведении на него мыши, а затем добавляет заголовок, когда я нахожу на него указатель мыши (для того, чтобы иметь мой лайтбокс ColorBox).
$(this).mouseover(
function() {
$(this).attr('title','');
}).mouseout(
function() {
$(this).attr('title', title);
});
Чтобы заголовок просматривался при нажатии, необходимо добавить еще одну функцию:
$(this).click(
function() {
$(this).attr('title', title);
}
);
Собираем все вместе, это выглядит так:
$("a[rel='portfolio']").each(function(e) {
var title = $(this).attr('title');
$(this).mouseover(
function() {
$(this).attr('title','');
}).mouseout(
function() {
$(this).attr('title', title);
});
$(this).click(
function() {
$(this).attr('title', title);
}
);
});
Надеюсь, это поможет всем, кто ищет похожее или точное решение!
Вы можете проверить изменения здесь.
Спасибо Abriel за решение, я преобразовал его в YUI 3, и ниже приведен код на случай, если он кому-то понадобится
YUI().use('node', function(Y) {
Y.all("a[rel='portfolio']").each(function(node) {
var title = node.get('title');
node.on('mouseover', function(ev) {
ev.target.set('title', ev.target.get('text'));
ev.target.on('mouseout', function(e) {
e.target.set('title', title);
})
})
node.on('click', function(ev) {
ev.target.set('title', title);
})
})
})
Я искал решение jquery, но я использую решение javascript, которое мне подходит. Мне нужен атрибут «title» для передачи описательной информации о продукте / изображении, и в этой описательной информации были необходимы основные теги HTML. И поэтому всякий раз, когда кто-то наводит указатель мыши на изображение, всплывает этот смешанный код и описание. Это было менее чем желательно, поэтому я использую следующий код, чтобы информация о заголовке была скрыта при наведении курсора мыши, но информация о заголовке по-прежнему доступна по щелчку.
Добавьте это в свой код ссылки! Надеюсь, это поможет кому-то:
onclick=\"javascript: this.title='description and or html goes here' ;\"
onMouseOver=\"javascript: this.title='' ;
Ваше здоровье!
Это работает так:
1. Создайте свой собственный атрибут и вызовите его из лайтбокса.
<a href="www.website.com" stitle="hello">click me</a>
2: переименуйте атрибут title в файле jquery на:
getAttribute('stitle')
Я использовал его для своей всплывающей подсказки, но он должен работать и без него.
Я вложил свою ссылку и поместил в нее заголовок. Затем во вложенном изображении я написал title = "" (с этим пробелом).
<a href="http://myweb.com" class="tooltip" id="facebook" title="Sing up to my Newsletter"
<img title=" " src="../img/email.png" alt="email icon" width="32">
</a>
Затем, когда я нахожу указатель мыши на значок электронной почты, заголовок не отображается.
