Linki wewnątrz większych obszarów klikalne (CSS Only)

Oto dobry artykuł na temat tworzenia powiązań wewnątrz większych obszarach klikalne:Linki wewnątrz większych obszarów klikalne (CSS Only)

http://css-tricks.com/links-inside-of-larger-clickable-areas/

To rozwiązanie wymaga JavaScript. Pod koniec artykułu znajduje się zepsuty link do rozwiązania tylko CSS (więc najwyraźniej można to zrobić), ale nie mogę się domyślić, jak to zrobić tylko z CSS. Jakieś pomysły?

Links inside larger clickable area

Źródło

2012-07-10 David Jones

Więc każdy z czerwonymi obszarów są klikalne? Jak duży zielony teren? –

Tak, zgadza się. Oczywiście możesz pokroić duży zielony obszar na dwie połówki, aby były oddzielne, ale wizualnie popłynęły razem, ale jeśli chcesz mieć efekt: hover do zielonego obszaru, nie masz szczęścia bez JavaScriptu. –

@danielfaraday - Myślę, że krojenie jest tu właściwym rozwiązaniem. Posiadanie sąsiadujących ze sobą klikalnych obszarów bez luki może prowadzić do mylących błędnych kliknięć. Problem z stylizacją, o którym wspomniałeś, można znaleźć w pobliżu, zobacz moją odpowiedź poniżej: – Gareth

Nie wydaje mi się to zbyt trudne (JSFiddle).

HTML:

<header> 
    <a href="#1">Clickable</a> 
    <nav> 
     <ul> 
      <li> 
       <a href="#2">Clickable</a> 
      </li> 
      <li> 
       <a href="#3">Clickable</a> 
      </li> 
      <li> 
       <a href="#4">Clickable</a> 
      </li> 
      <li> 
       <a href="#5">Clickable</a> 
      </li> 
     </ul> 
    </nav> 
</header>

CSS:

a { color: #f4ebd4; font-family: sans-serif; text-decoration: none; text-transform: uppercase; font-size: 0.8em; } 

header { text-align: center; } 

header > a { display: block; line-height: 100px; } 

header > a, header > a + nav { background: #4b885c; } 
a:hover, a:hover + nav { background: blue; } 

nav ul { display: table; width: 100%; } 
nav li { display: table-cell; } 
nav a { display: block; background: #a51d2c; padding: 10px 20px; margin: 10px; }

Źródło

2012-07-10 16:55:22 Gareth

Wow, znacznik jest również ważny! Kluczem jest ustawienie "line-height: 100%" na "zewnętrznym" łączu. Bardzo fajny. –

cóż nie, to tylko jeden prosty sposób wyśrodkowania jednego wiersza tekstu w jego bloku macierzystym (na przykład nie działałby z 2 liniami tekstu). Jeśli martwisz się tym, to jest to 'display: block' na górnym łączu, co jest ważne - po tym możesz zrobić, co chcesz, za pomocą linku, aby zmienić jego rozmiar. – Gareth

Ach, rozumiem. Dzięki. –

spróbować http://jsfiddle.net/5MkVW/ I szybko umieścić go razem w ciągu ostatnich 5 minut w pracy, może być nieco niechlujny ale mieć go.

Źródło

2012-07-10 16:32:12

Interesujące. Nie zdawałem sobie sprawy, że zagnieżdżone znaczniki ' mogłyby działać. (Składnia jest oczywiście nielegalna, ale wydaje się działać). Oczyściłem twój JSFiddle nieco: http://jsfiddle.net/7bP2T/ –

Zaktualizowany z prawdziwymi linkami: http://jsfiddle.net/XdtN2/. Testowany działający w IE9 (pomimo nieprawidłowego HTML). –

Linki wewnątrz większych obszarów klikalne (CSS Only)

Odpowiedz

Powiązane problemy