2011-11-10 29 views
7

Przejrzałem poprzednie pytania i żadne z nich naprawdę nie działało dla mnie, sprawdziłem Google, a informacje, które znalazłem, wydają się dość nieprecyzyjne, więc pomyślałem, że spróbuję tutaj.Ukrywanie znaczników tytułów na hover

Czy ktoś jest świadomy/lub ma problem z wyświetlaniem tagów tytułowych po najechaniu myszą. Mam serię linków i obrazów, do których przypisane są znaczniki tytułów, jednak niektóre z nich będą wyświetlać informacje, które lepiej się nie wyświetlają po najechaniu myszą.

Czy istnieje funkcja globalna, której można użyć, aby zastosować to do wszystkich tagów tytułu? Przykładem może być następujący:

<a href="service.php" title="services for cars" /> 

Jeśli to możliwe chciałbym wyłączyć tytułem „usług od samochodów” występujące przy aktywowaniu.

Jeszcze raz dziękuję.

Odpowiedz

9

ten powinien działać dobrze, aby wyłączyć jeden tytuł:

<a href="service.php" title="services for cars" onmouseover="this.title='';" /> 

Jeśli potrzebujesz tytuł potem można go przywrócić:

<a href="service.php" title="services for cars" onmouseover="this.setAttribute('org_title', this.title'); this.title='';" onmouseout="this.title = this.getAttribute('org_title');" /> 

ten sposób nie jest nazwą rodzajową chociaż .. mieć zastosowane do wszystkich kotwic, mają taki kod JavaScript:

window.onload = function() { 
    var links = document.getElementsByTagName("a"); 
    for (var i = 0; i < links.length; i++) { 
     var link = links[i]; 
     link.onmouseover = function() { 
      this.setAttribute("org_title", this.title); 
      this.title = ""; 
     }; 
     link.onmouseout = function() { 
      this.title = this.getAttribute("org_title"); 
     }; 
    } 
}; 

Live test case.

Edycja: aby zastosować takie same dla kilku tagów (np <img>) najpierw przenieść rdzeń kodu do funkcji:

function DisableToolTip(elements) { 
    for (var i = 0; i < elements.length; i++) { 
     var element = elements[i]; 
     element.onmouseover = function() { 
      this.setAttribute("org_title", this.title); 
      this.title = ""; 
     }; 
     element.onmouseout = function() { 
      this.title = this.getAttribute("org_title"); 
     }; 
    } 
} 

następnie zmień kod na:

window.onload = function() { 
    var links = document.getElementsByTagName("a"); 
    DisableToolTip(links); 
    var images = document.getElementsByTagName("img"); 
    DisableToolTip(images); 
}; 
+0

Genius, działa idealnie, dzięki za to. –

+1

Pozdrawiam! Tylko jedna uwaga, "okno".onload' "nadpisze" wszelkie inne zdarzenia związane z ładowaniem, więc możesz o tym pamiętać. :) –

+0

Edycja działa również, ale tylko dla tagów, czy może nie działać również dla obrazów? –

0

można” t wyłącz je, ponieważ jest to ogólna część specyfikacji przeglądarki/html. Ale jestem świadomy, że można je stylizować za pomocą css i javascript, więc display: none właściwie powinno być możliwe do użycia gdzieś.

wygląd here

+0

To działałoby dobrze, jednak jest to tylko CSS3 i potrzebujemy go, by był zgodny ze wszystkimi przeglądarkami. –

5

Jeśli rozumowanie za pomocą znacznika 'Tytuł' jest pod względem zgodności Aria, użyj aria-label zamiast.

<a href="service.php" aria-label="services for cars" /> 
+0

to jest to, czego potrzebowałem. Dzięki! –

2

Spróbuj ustawić dwa tytuły, pusty taki, który zostanie wybrany przez przeglądarkę jako podpowiedzi, a następnie jedną potrzebujesz:

<a href="service.php" title="" title="services for cars" /> 
0

chociaż to już odpowiedział w standardzie JS.

Oto rozwiązanie jQuery.

$('a').hover( 
    function() { 
     $(this).attr("org_title", $(this).attr('title')); 
     $(this).attr('title', ''); 
    }, function() { 
     $(this).attr('title', $(this).attr("org_title")); 
    } 
); 
0

Prostym rozwiązaniem jest użycie CSS na pojemniku obrazu (div lub):

pointer-events: none; 
cursor: default;