• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed CSS / HTML Obramowanie całości 3/2 segmentowych elementów innym kolorem

VPS Starter Arubacloud
+1 głos
132 wizyt
pytanie zadane 6 września 2023 w HTML i CSS przez troian1337 Użytkownik (720 p.)
zamknięte 8 września 2023 przez troian1337

Witam, potrzebuję utworzyć takie wpisy css aby uzyskać efekt jak na załączonym obrazku, mianowicie chodzi mi tutaj aby zewnętrzny obrys całego zbioru miał inny kolor niż wewnętrzne elementy, problem jest taki że ilość elementów wewnątrz może być nie parzysta na końcu przez co selektory nth-child nie zdadzą tutaj egzaminu bo trzeba by tworzyć dużo różnorakich kombinacji + przy skalowaniu się w dół z 3 segmentów robią się dwa więc robi się tego jeszcze więcej. Istnieje jakiś sposób na utworzenie takiego obramowania?

No i jest jeszcze drugi problem, mianowicie po najechaniu na wybrany element potrzebuję aby jego obramowanie wyszło ponad to "zielone"

Czy jest możliwe uzyskanie takiego efektu przy pomocy samego css?

komentarz zamknięcia: Rozwiązanie problemu podał VBService

1 odpowiedź

0 głosów
odpowiedź 6 września 2023 przez VBService Ekspert (254,880 p.)
wybrane 8 września 2023 przez troian1337
 
Najlepsza

Próbowałeś triku z outline i z-index, aby uzyskać efekt tzw. border-collapse

Przykład  [ on-line ]

<style>
    .container {
        --border-size: .25rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        grid-template-rows: repeat(3, 1fr);
        grid-gap: var(--border-size);
        outline: var(--border-size) solid red;
        max-width: 80dvw;
        height: 85dvh;
        margin: 0 auto;
        isolation: isolate;
        box-sizing: border-box;
        overflow: hidden;
    }
    .container div {
        position: relative;
        width: 100%;
        height: 100%;
        outline: var(--border-size) solid green;
        z-index: 1;
        transition: all 250ms;
    }
    .container div:hover {
        outline-color: red;
        z-index: 9999;
    }
</style>

<div class="container">
    <div></div><div></div><div></div>
    <div></div><div></div><div></div>
    <div></div><div></div><div></div>
</div>

 

komentarz 7 września 2023 przez troian1337 Użytkownik (720 p.)
Niestety w twoim przykładzie kolory są odwrotnie, jeżeli zamienię je tak jak na przykładzie to zewn. obwódka nie zmienia się na czerwoną, a pozostaje zielona.
komentarz 8 września 2023 przez VBService Ekspert (254,880 p.)
edycja 8 września 2023 przez VBService

Sprawdź z zastosowaniem js.

[ on-line ]

<style>
  :root {
    --border-size: .25rem;
  }
  .container {    
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: var(--border-size);
    border: var(--border-size) solid green;
    max-width: 80dvw;
    height: 85dvh;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
  }
  .container div {
    position: relative;
    width: 100%;
    height: 100%;
    outline: var(--border-size) solid red;
    transition: all 250ms;
  }
  .hover { 
    display: none;
    position: absolute;
    border: var(--border-size) solid red;
    background-color: transparent;
    z-index: 9999;
  }
</style>

<div class="container">
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
</div>
<div class="hover"></div>

<script>
  const container = document.querySelector('.container'),
        hoverBox = document.querySelector('.hover');

  container.addEventListener('mouseover', hover);
  container.addEventListener('mouseout', hover);
  hoverBox.addEventListener( 'mouseout', hover);

  function hover(e) {
    if (e.target.matches(':not(.container, .hover)')) {
      const element = e.target.getBoundingClientRect();      
      hoverBox.style.width = element.width + 'px';
      hoverBox.style.height = element.height + 'px';
      hoverBox.style.top = `calc(${element.top}px - var(--border-size))`;
      hoverBox.style.left = `calc(${element.left}px - var(--border-size))`;
      hoverBox.style.display = 'block';
    } else if (e.type == 'mouseout') {
      hoverBox.style.display = 'none';
    }   
  }
</script>

 

Podobne pytania

0 głosów
2 odpowiedzi 482 wizyt
pytanie zadane 26 sierpnia 2018 w HTML i CSS przez szustka124 Gaduła (4,380 p.)
0 głosów
1 odpowiedź 243 wizyt
pytanie zadane 17 grudnia 2017 w HTML i CSS przez Alcomats Użytkownik (580 p.)
0 głosów
2 odpowiedzi 163 wizyt
pytanie zadane 15 lutego 2017 w HTML i CSS przez Allen Obywatel (1,010 p.)

92,768 zapytań

141,690 odpowiedzi

320,506 komentarzy

62,106 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...