Programim dhe zhvillim, javascript, python, php, html

tejmbushje: lidhja e dukshme që nuk klikohet kur është pranë elementit të pozicionit absolut

Kam dy elementë div të pozicionuar absolutisht, të cilët vendosen pranë njëri-tjetrit. Elementi i parë div ka overflow: visible dhe një lidhje me përmbajtje të gjatë e cila rrjedh në krye të elementit div fqinj. Po përpiqem të klikoj në lidhjen nga div fqinj, pa fat- në Chrome dhe Firefox. Kjo funksionon në IE9. Një shembull kodi do të shpjegojë atë që po përpiqem të bëj-

<div>
  <a href="#">Reeeeeeeeeeeeeaallllllly Looooon Liiink Teeeext</a>
</div>
<div class="two">
</div>​

Dhe fleta e stilit:

div{
position: absolute;
height: 50px;
width: 80px;
border: 2px solid;
overflow: visible;
white-space: nowrap;
z-index: 1;
}
.two{
left:82px;
}
a{
z-index: 2;
}

jsfiddle: http://jsfiddle.net/yzSwL/1/

Ndonjë sugjerim? Mendova se z-index mund të ndihmojë, por jo. Teksti i lidhjes gjithashtu nuk është i zgjidhshëm kur miu është mbi ndarjen e dytë.

Faleminderit paraprakisht.

Përditëso

Në fakt skenari im është më i ndërlikuar se sa e lashë, pasi nuk e kuptoja se ku do të shkonin përgjigjet. Pointer-events duket si zgjidhja më e pastër, por për fat të keq nuk mund ta përdor pasi të gjitha div-të mund të kenë lidhje në to.

Një jsfiddle më realist: http://jsfiddle.net/yzSwL/6/

Vetëm për të shpjeguar se çfarë po përpiqem të arrij - po bëj një aplikacion orar me një rrjet orësh me shumë div të pozicionuara pranë njëri-tjetrit. Çdo div mund të ketë një lidhje në të. Gjerësia e lidhjes është gjatësia e takimit.

html css
09.08.2012

Përgjigjet:


1

Këtë mund ta bëni duke vendosur pointer-events:none; për klasën .dy

Treguesi dëshiron të fokusohet në ndarjen e sipërme, por nëse i thoni të mos e bëjë, ai do të shkojë te div që është prapa.

Fiddle pune: http://jsfiddle.net/yzSwL/2/

09.08.2012
  • Pastaj aplikoni një klasë në lidhjen me { pointer-events: all; }. Siç shihet këtu: jsfiddle.net/yzSwL/7 09.08.2012
  • E bukur! Faleminderit. Nuk kam dëgjuar kurrë më parë për ngjarje treguese. Mendoj se kjo shpjegon pse funksionon në IE9 dhe jo në të tjerët. 09.08.2012

    • 2

    do të keni probleme duke përdorur pointer-events në IE 9 dhe më poshtë dhe gjithashtu Opera.

    Unë e kam ristrukturuar pak HTML CSS tuaj http://jsfiddle.net/GVL5e/

    09.08.2012
  • Në fakt, tashmë është duke punuar në IE9 për këtë arsye, nuk ka mbështetje për ngjarjet e treguesit. 09.08.2012
  • Kjo është një zgjidhje e shkëlqyer. Kam përdorur qasjen tuaj për të sjellë përpara një div të pozicionuar relativ në një imazh të shtrirë në pozicion absolut. Ajo div kishte të gjitha elementet e lidhjes dhe butonit të saj që nuk mund të klikoheshin. Faleminderit. 25.05.2016

    • 3

    Ky rregull nuk ka efekt:

    a{
z-index: 2;
}

    Nuk është a që është pozicionuar, por prindi i tij div. z-index zbatohet vetëm për elementët e pozicionuar.

    Ajo që duhet të bëni në vend të kësaj është kjo:

    div{
    ...
    z-index: 2;
}
.two{
    ...
    z-index: 1;
}

    http://jsfiddle.net/yzSwL/4/

    Gjithashtu vini re se edhe nëse do të shtonit position: absolute në a për ta bërë z-index të funksiononte për të, ai ende nuk do të shkonte në krye të .two. Kjo do të bënte vetëm që ai të pozicionohej në krye të elementeve të tjerë brenda prindit të tij të pozicionuar div (konteksti i tij i grumbullimit).

    09.08.2012

    4

    Ka shumë zgjidhje, por ju duhet të ndryshoni stilin:

    1. Mos i detyroni divët tuaj të kenë gjerësi fikse
    2. Vendos overflow:hidden;
    3. Hiq white-space: nowrap;
    09.08.2012
  • Më duhen të gjitha ato rregulla CSS për paraqitjen. Unë dua të ruaj të njëjtin plan urbanistik, thjesht ta bëj lidhjen të klikueshme. 09.08.2012

    • 5

    Në kodin tuaj, ju caktoni të njëjtin z-indeks për të dy DIV-të.

    Në vend të kësaj, përpiquni të caktoni një z-indeks më të ulët për DIV-në e dytë.

    div{
position: absolute;
height: 50px;
width: 80px;
border: 2px solid;
overflow: visible;
white-space: nowrap;
z-index: 10;
}
.two{
left:82px;
    z-index: 5;
}

    09.08.2012
    Materiale të reja
    Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
    Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..
    Faketojeni derisa ta arrini me të dhënat false
    A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...
    Si të përdorni kërkesën API në Python
    Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..
    Një udhëzues hap pas hapi për të zotëruar React
    Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..
    AI dhe Psikologjia — Pjesa 2
    Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..
    Esencialet e punës ditore të kodit tim VS
    Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..
    Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
    Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..