29.09.2021, Vladimír Klaus, navštíveno 1119x

HTML/CSS

Velmi často jsem se potýkal s problémem, kdy se měl nějaký <div> chovat jako odkaz. Samozřejmě se nabízí tento <div> obalit <a>, čímž se to v podstatě řeší, ale není to úplně ideální. Jednak ještě docela nedávno nebylo možné/vhodné takto vnořovat elementy, ale hlavně se pak daný element začne chovat jako <a> a vy pravděpodobně potřebujete, aby to byl stále 100% <div>.

Nakonec jsem našel řešení, které, zdá se, funguje zcela spolehlivě. Základem je, že <a> link vložíme až do <div>, takže hlavní funkce <div> zůstane zachována. Potom do <a> vložíme pomocný <span>.

<div>
    <a href="~/CZ/nase-sluzby#Sluzba1">
        <span class="DivLink"></span>
        <img src="~/CZ/_images/stavy/building-3-customer-woman-small.svg" class="ikonka" />
        <p>Vnitrostátní kusová a paletová doprava</p>
    </a>
</div>

Tento pomocný <span> vlastně obalí celý <div>, přičemž pokrývá 100% aktivní plochy. Nestane se tak, že najedete myší kousek od obsahu <div> a kurzor se již mění - protože tam máte margin. Zde to reaguje až na opravdový obsah <div>.

.DivLink {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1
}

Alternativní řešení, který popisuje druhý odkaz mi nevyhovuje, protože už to není <div>, ale <a>, které má uvnitř <div>, což přináší řadu zbytečných komplikací.

Zdroje:

Nahoru