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

Question

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?

Answer 1

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>

 

Comments

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.

---

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>