Vraag HTML: stop onderliggende elementen van het attribuut [title] van het overervende ouder


Het probleem is dat wanneer ik een titelkenmerk voor een 'wrapper'-element declareer, de a tool-tip verschijnt wanneer de cursor ook binnen het' content'-element valt. Hoe voorkom ik dat dit (overerving) gebeurt?

<style> 
  #content{ margin:25px;}
</style>

<div id='wrapper' title='example'>
  <div id='content'>

  </div>
</div>

(Ik wil alleen dat de tool-tip verschijnt tussen de randen van de elementen 'content' en 'wrapper', in plaats van in beide)


11
2018-05-04 10:25


oorsprong


antwoorden:


Ik denk niet dat dit mogelijk is met pure CSS of HTML.

Een manier om dit te hacken, is het gebruik van de code aan de kant van de client .. Eenvoudig standaard JavaScript-voorbeeld:

window.onload = function() {
    var oDiv = document.getElementById("content");
    oDiv.onmouseover = function() {
        this.parentNode.setAttribute("old_title", this.parentNode.title);
        this.parentNode.title = "";
    };
    oDiv.onmouseout = function() {
        this.parentNode.title = this.parentNode.getAttribute("old_title");
    };    
};

Dit zal de ouder "wissen" div titel bij muisaanwijzer van de inhoud en herstelt de titel wanneer de muis de inhoud verlaat.

Live testcase: http://jsfiddle.net/UASPZ/


5
2018-05-04 10:36



Ik had hetzelfde probleem. Ik kwam erachter dat je dit kunt voorkomen door de onderliggende elementen een dummy-titel te geven title=" ".


4
2018-05-18 17:00



Zelfde probleem hier.

Ik ontdekte dat specificeren title=' ' werkt voor Chrome en FireFox maar vertoont vervelende tool-tip met één spatie in IE. title='' werkt voor IE, maar wordt volledig genegeerd door Chrome en FireFox, waardoor de tooltip van de ouder wordt weergegeven.

Heeft niet berekend hoe te maken in cross-browser :(


2
2017-07-22 18:34