Kliknięcie warstw/divs

Jeśli mam dwie warstwy na stronie, podzielone horrizontalnie, z drugą warstwą pokrywającą się z częścią pierwszej warstwy, czy możliwe jest jej "kliknięcie"?Kliknięcie warstw/divs

Mam linki w pierwszej warstwie, która nakłada się na drugą warstwę, co uniemożliwia klikanie linków. Czy istnieje sposób na wyświetlenie warstwy, ale kliknięcie, a jednocześnie możliwość kliknięcia własnych linków?

edit:

Oto przykład z HTML i stylów.

Testowe łącza stają się niemożliwe do sklejenia po wstawieniu nagłówka w warstwie 3, ale poniżej są w porządku. Czy istnieje sposób, aby to naprawić?

<title>Test</title> 
<link rel="stylesheet" href="test.css" type="text/css"> 
<body> 
<div id="Layer0"> 
<div id="Layer1" class="Layer1"> 
<h3 align="left">Brands</h3> 
</div> 
<div id="Layer2" class="Layer2"><h1>TEST</h1> 
<div id="rightlayer"> 
<a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p> 
</div> 
</div> 
<div id="Layer3" class="Layer3"><h1>Ed Hardy Auctions</h1> 
</div> 
</div> 
</body> 
</html>

A css

#Layer0 { 
    width:100%; 
    height:100%; 
} 
body { 
    margin:10px 10px 0px 10px; 
    padding:0px; 
    color:#999999; 
    font-family:"Trebuchet MS",arial,sans-serif; 
    font-size:70.5%; 
} 
#Layer1 { 
    position:absolute; 
    left:10px; 
    width:200px; 
    margin-top:17px; 
    font-size:1.0em; 
    padding-left:12px; 
    padding-top:8px; 
} 
#Layer2 { 
    background:#fff; 
    margin-left:199px; 
    color:#000; 
} 

#rightlayer { 
float:right; 
} 
.Layer3 { 
position:absolute; 
top:67%; 
padding:20px; 
width: 100%; 
}

Źródło

2009-05-29 Joshxtothe4

To nie jest możliwe, jeśli chcesz DIV pozostać w swoich obecnych x, y, (i co najważniejsze) oo - tylko "top" warstwa jest klikalna.

Uzupełnienie po OP edit:

Pomyśl o układ CSS jakbyś fizycznie pracujący z kawałkami papieru (to znacznie łatwiej wyobrazić, jeśli dać całą swoją „warstwę” DIV inny kolor tła). Silnik renderujący wycina trochę papieru w wymiarach, które mu dajesz (lub to działa) dla każdego znalezionego elementu. Robi to w kolejności, w której napotyka je, wkładając każdy kawałek papieru na stronę - ostatni element będzie na górze.

Teraz powiedziałeś silnikowi renderującemu, aby umieścił swój trzeci div w pozycji, w której pokrywa się z drugim. A teraz oczekujesz, że będziesz w stanie "zobaczyć" ukrytą zawartość. Nie działa z papierem, nie będzie działać z HTML. To, że jest przezroczysty, nie oznacza, że nie zajmuje miejsca.

Musisz coś zmienić.

Patrząc na CSS i znaczników (który szczerze mógłby być czyszczone, ale będę zakładać tam inne znaczniki nie jesteś pokazując nam, co uzasadnia ją) istnieje kilka prostych sposobów wygrać:

1). Ustaw z-index z -1 na poziomie Layer3 - z-index to sposób, w jaki można zmienić kolejność warstw z domyślnego (tak, jak został napotkany). Powoduje to przesunięcie całej warstwy 3 poniżej reszty strony, więc to, co zostało ukryte, zostaje odsłonięte, ale także odwrotnie w zależności od zawartości.

2). Zmień szerokość z 100% na np. 80%, lub bardziej prawdopodobne, biorąc pod uwagę, że użyłeś pos: abs set left: 0px and right: 199px; (Zgaduję, że dopełnienie - pozostawione na Warstwie 2 jest zamierzoną szerokością kolumny?). Kosztem tego jest to, że twoja warstwa 3 nie jest już 100% szerokości

3). Google "Układ kolumn CSS" i znajdź wzór odzwierciedlający to, czego potrzebujesz i dostosuj go. Każdy układ CSS, który można wykonać, został już zrobiony milion razy. Istnieją standardowe techniki, które rozwiązują twoje problemy. CSS jest trudny, jeśli nie masz doświadczenia, więc wykorzystaj doświadczenie innych. Nie wynajduj ponownie kół.

Źródło

2009-05-29 11:13:29 annakata

Trudno powiedzieć, nie widząc jakiś kod.

Możesz spróbować ustawić indeks Z na dolnej warstwie, ale działa na elementach, które zostały ustawione absolutnie, względnie lub na stałe (pozycja: bezwzględna).

edytować kod po obejrzeniu:

Dodaj position: relative; indeks z: 100; na #rightLayer.

Lub możesz usunąć szerokość: 100% z .Layer3.

Być może zechcesz zmienić kod i przejść do układu dwóch kolumn dla #rightLayer i .Layer3.

css

#Layer0 { 
    width:100%; 
    height:100%; 
} 
body { 
    margin:10px 10px 0px 10px; 
    padding:0px; 
    color:#999999; 
    font-family:"Trebuchet MS",arial,sans-serif; 
    font-size:70.5%; 
} 
#Layer1 { 
    width:200px; 
    margin-top:17px; 
    font-size:1.0em; 
    padding-left:12px; 
    padding-top:8px; 
} 
#Layer2 { 
    background:#fff; 
    margin-left:199px; 
    color:#000; 
} 

#rightlayer { 
float:right; 
} 
.Layer3 { 
}

html

<div id="Layer0"> 
    <div id="Layer2" class="Layer2"> 
     <h1>TEST</h1> 
    </div> 
    <div id="Layer1" class="Layer1"> 
     <h3 align="left">Brands</h3> 
    </div> 
    <div class="content"> 
     <div id="rightlayer"> 
      <a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p> 
     </div> 
     <div id="Layer3" class="Layer3"> 
      <h1>Ed Hardy Auctions</h1> 
     </div> 
    </div> 
</div>

Źródło

2009-05-29 11:10:01 Emily

Nie mogę usunąć szerokości, tak jak na stronie, na której linki znajdują się bardziej na środku strony. Spróbuję, jak sugerujesz .. dzięki –

Ahh, zmiana na pozycję: względna przenosi warstwę 3 za daleko w dół strony. Czy istnieje sposób, aby temu zapobiec? –

Byłaby to gigantyczna praca, ale jest to możliwe.
Musisz przechwycić zdarzenie click na górnej warstwie/div i znaleźć pozycję kursora x-y.
Następnie znajdź wszystkie linki w warstwie/div pod górną warstwą i zobacz, czy ich pozycja na ekranie spada wokół aktualnej pozycji myszy.
Następnie można wywołać kliknięcie dopasowanego łącza.
Chciałbym użyć jQuery (jeśli jeszcze nie jest) do tego, a następnie ponownie opublikować za pomocą znacznika jQuery, jeśli napotkasz problemy.

Źródło

2009-06-05 14:56:42

Nie tak mamucie, jak sądzę. Czy używałbyś funkcji offset(), width() i height() jQuery? – Nosredna

Nie, to nie jest żadna duża praca, a to jest poprawne i jedyne podejście. – Owen

Zakładam na przykładzie, że linki w prawej warstwie są jedynymi linkami, które należy kliknąć, i że nie masz odnośników na innych warstwach. Jeśli tak, możesz rozwiązać problem, zmieniając kolejność z-index elementów div.

Warstwy 1 i Warstwa 3 mają pozycję bezwzględną, więc jeśli dodasz styl pozycji (bezwzględny lub względny) do Warstwy 2, będziesz mógł wyciągnąć ten div na przód, również pociągając element div prawa do warstwy wyższej niż Layer3.

I dodaje następujące do CSS:

#Layer2 {  
    position: relative; 
    z-index: 1; 
}

Z tego co widzę, że pozostawia Aktualne ustawienia strony tak, jak to jest, ale ciągnie wszystkie elementy (w tym rightlayer z linków) do z przodu, więc możesz kliknąć wszystkie linki w nim.

Do celów debugowania sugeruję dodanie kolorów tła do wszystkich różnych warstw, aby uzyskać pojęcie o kolejności z-Z różnych warstw. Po ustawieniu koloru tła łatwo było zauważyć warstwę, która spadała nad łączami, ale także zweryfikować, czy nowa kolejność z-index udostępnia łącza.

Mam nadzieję, że to pomoże!

Źródło

2009-06-07 20:54:37 ylebre

Zgłosiłem błąd lata temu do Bugzilli Firefoxa mówiąc, że był ten błąd w Firefoksie.

Inżynier Mozilli powiedział mi, że to nie jest błąd i że jest to prawidłowe zachowanie zgodnie ze specyfikacjami HTML/CSS. Niestety nie mogę znaleźć oryginalnego błędu, z którym można się odwołać, ponieważ było to około 6 lat temu.

Powodem, dla którego zgłosiłem błąd, było to, że mogłem kliknąć górny div na odnośnikach poniżej podczas korzystania z IE (chyba 6), ale Firefox by mi nie pozwolił.

Jak zwykle okazało się, że kapelusz ma nieprawidłową implementację i Firefox działał zgodnie z zamierzeniami.

To, że element div jest przezroczysty, nie oznacza, że powinno się przez niego klikać.

Nie jestem pewien, jak można to obejść za pomocą JavaScript lub CSS. Zrobiłbym krok do tyłu i ponownie przemyśleć, co próbujesz osiągnąć i jak próbujesz to osiągnąć.

Greg

Źródło

2009-06-08 10:55:14

Nie można po prostu ustawić szerokość div Auto (domyślny dla pozycjonowania absolutnego - czyli po prostu usunąć szerokość: 100% od .Layer3).

W ten sposób element div będzie tylko tak szeroki, jak jest to konieczne, a nie niepotrzebnie zachodzi na łącza.

Źródło

2009-06-08 16:54:50 Matt

Pomyślałem, że zaktualizuję to tak, jak borykałem się z tym przez kilka godzin i sądzę, że znalazłem rozwiązanie. Sprawdzono, używając Jquery, ale właściwość CSS:

pointer-events:none;

... zrobiłem dokładnie to, co chciałem.

Źródło

2011-03-06 13:08:18 DrShamoon

Chociaż może nie używać tego w niczym szerokim, działa idealnie w rozszerzeniu Chrome, nad którym pracuję (ponieważ Chrome w pełni go obsługuje). Dzięki stosy dla tego –

Uwaga: to również łamie inne zachowanie (jak efekty hover). –

również nie będzie działać w nowoczesnych wersjach IE lub Opera – Andre

Kliknięcie warstw/divs

Odpowiedz

Powiązane problemy