Có thể ẩn tiêu đề href?

Question

<a href="link.html" title="Titletext"> 

... là mã.

Tôi cần sử dụng thuộc tính title vì slimbox, nhưng tôi muốn ẩn văn bản tiêu đề hiển thị khi di chuột qua liên kết.

Bất kỳ ý tưởng nào?

Answer 1

Giả sử bạn đang sử dụng một thẻ hình ảnh trong một thẻ, bạn chỉ có thể sử dụng một sự thay thế tiêu đề cho hình ảnh (ngay cả một không gian) và sẽ ghi đè tiêu đề của liên kết khi bạn di chuột qua nó.

Answer 2

Không bảo đảm nhưng tùy thuộc vào cách Slimbox hoạt động, bạn có thể bao gồm tiêu đề, sau đó sử dụng một cái gì đó như jQuery để xóa nó một vài giây sau khi tải trang. Giả sử Slimbox lập chỉ mục thuộc tính Tiêu đề và lưu trữ nó ở đâu đó sau khi đọc nó, bạn có thể loại bỏ nó một cách an toàn sau khi điều này xảy ra.

Answer 3

Bạn không thể lặp qua các liên kết trong DOM và đặt thuộc tính tiêu đề thành chuỗi rỗng.

var DOMlinks = document.links; 
for(i=0;i<DOMlinks.length;i++){ 
DOMlinks[i].title = "" 
} 

Answer 4

Ghi đè/phủ nó bằng trống jQuery tooltip?

Answer 5

nếu bạn đang sử dụng jquery, bạn có thể làm sau

$("a").mouseover(function(e){ preventdefault();}); 

(đã không kiểm tra nó mặc dù)

Answer 6

Bạn không cần phải sử dụng thuộc tính title với Slimbox. Xem ví dụ về Nhiều hình ảnh ở gần đầu trang này: http://code.google.com/p/slimbox/wiki/MooToolsAPI.

Bạn chỉ cần xóa thuộc tính title khỏi neo của mình và chuyển văn bản title (mô tả hình ảnh của bạn) sang chức năng Slimbox open, mà bạn sẽ gọi bằng sự kiện onclick của neo.

Answer 7

// Suppress tooltip display for links that have the classname 'suppress' 

var links = document.getElementsByTagName('a'); 
for (var i = 0; i < links.length; i++) { 
    if (links[i].className == 'suppress') { 
     links[i]._title = links[i].title; 
     links[i].onmouseover = function() { 
      this.title = ''; 
     } 
     links[i].onmouseout = function() { 
      this.title = this._title; 
     } 
    }} 

Để trích dẫn câu trả lời Aron Rotteveel 's từ dupe đầu tiên liên kết trong comment của tôi cho câu hỏi (Disabling browser tooltips on links and <abbr>s)

Answer 8

Làm thế nào về một đơn giản đẹp:

<a href="link.html" title="Titletext"><span title=" ">text</span></a> 

(Better, đặt một cái gì đó thực sự hữu ích trong tiêu đề lồng nhau.)

Answer 9

liên quan đến "làm thế nào về một đơn giản đẹp" gợi ý tôi đã nhìn thấy được liệt kê trên một số trang web, cá nhân tôi sẽ không đề xuất điều này vì hai lý do.

1. Trình đọc màn hình và người dùng khiếm thị dựa vào các thuộc tính tiêu đề được đọc to. Tôi tin rằng đây là mục đích ban đầu và lý do cho họ trong các thẻ neo và là một khía cạnh lớn của USA Gov. Web Accessibility Section 508. Tôi nghĩ rằng một trình đọc màn hình trong trường hợp này sẽ đọc qua tất cả các tiêu đề; cái đầu tiên và cái thứ hai có thể rất khó hiểu đối với người dùng khiếm thị. Họ sẽ không hiểu tại sao họ lại nghe hai điều đặc biệt nếu nó chứa văn bản khác. Có hai neo khác nhau mà họ đang nghe không? Nếu vậy, tại sao họ không thể bấm hoặc chọn một trong những khác mà họ nghe và tiếp tục nhận được chỉ có một trang web (như là một kịch bản).

2. Nếu bạn đặt văn bản bổ sung trong Google của cả hai tiêu đề và nhiều công cụ tìm kiếm khác có thể xem hành động này là seo mũ đen và có thể dẫn đến trang web của bạn bị cấm sử dụng danh sách công cụ tìm kiếm (còn gọi là nhồi). Đức của Google đã có.

Cá nhân tôi nghĩ phương pháp tốt nhất là giữ thuộc tính tiêu đề vì nó hoạt động và sau đó sử dụng Javascript hoặc css để ẩn nó bằng cách nào đó. Những phương pháp này sẽ không ảnh hưởng đến trình đọc màn hình, trình thu thập dữ liệu web và người dùng khiếm thị.

Answer 10

Đây là thực sự dễ dàng với jQuery

$("li.menu-item > a").attr('title', ''); 

Điều đó sẽ loại bỏ các tiêu đề từ bất kỳ một yếu tố của lớp li menu-item - tất nhiên bạn có thể nhận được ưa thích vì vậy họ chỉ ẩn trên một con chuột qua :)

Answer 11

Tôi thích thú với jquery ...;) Tôi cần điều này cho danh mục đầu tư: thẻ tiêu đề cho hộp đèn nhưng không có gì khi di chuột qua. Điều này làm việc cho tôi, cảm ơn cho gợi ý!

$(function(){ 
    $("li.menu-item > a").hover(function(){ 
     $(this).stop().attr('title', '');}, 
     function(){$(this).stop().attr(); 
     }); 
}); 

Answer 12

cách dễ nhất sẽ là:

sau khi sử dụng slimbox của bạn, thêm đoạn mã sau dưới nó:

$('*[title]').removeAttr('title'); 

hy vọng nó có thể giúp ..

Answer 13

Sử dụng ý tưởng từ David Thomas, bạn có thể tạo ra một giải pháp thanh lịch hơn bằng cách sử dụng jQuery:

$('[title]').each(function(){ 
    $(this).data('original-title', $(this).attr('title')); 
}).hover(
    function() { 
     $(this).attr('title','') 
    }, function() { 
     $(this).attr('title',$(this).data('original-title')) 
}); 

Answer 14

jQuery giải pháp - điều này nên thẳng về phía trước:

var hiddenTitle; //holds the title of the hovered object 
$("li.menu-item > a").hover(function() { 
    hiddenTitle = $(this).attr('title'); //stores title 
    $(this).attr('title',''); //removes title 
}, function() { 
    $(this).attr('title',hiddenTitle); //restores title 
}); 

Answer 15

này được giải pháp jQuery của tôi, nó làm mọi thứ bạn cần và giữ việc sử dụng đúng đắn về các thuộc tính tiêu đề. Chỉ cần thay đổi bộ chọn theo nhu cầu của bạn.

/* 
* jQuery remove title browser tooltip 
*/ 
var removeTitleSelector = 'a.removeTitle'; 
jQuery('body').on('mouseover', removeTitleSelector, function() { 
    jQuery(this).data('title', jQuery(this).attr('title')); 
    jQuery(this).removeAttr('title'); 
}).on('mouseout', removeTitleSelector, function() { 
    jQuery(this).attr('title', jQuery(this).data('title')); 
}); 

Answer 16

Khi đọc một câu hỏi khác, tôi đề nghị chuyển thuộc tính "tiêu đề" thành một số "tiêu đề dữ liệu" để giữ cho trình đọc màn hình cho người dùng bị vô hiệu hóa. Như Lokin đã nói, việc duy trì khả năng sử dụng của trang web đối với người dùng bị khuyết tật và tàn tật cũng phải là điều đáng lo ngại khi phát triển.