Jak zmienić kolor elementu po najechaniu na niego myszą?

0

Hej nie mogę sobie poradzić z kodem poniżej a mianowicie dlaczego działa mi :hover tylko dla .red? Wyświetla tekst a dla reszty

<body>
    <div class="red circle"></div>
    <div class="green circle"></div>
    <div class="blue circle"></div>
    <div class="orange circle"></div>
    <div class="bg">
        <p class="red">Czerwony</p>
        <p class="green">Zielony</p>
        <p class="blue">Niebieski</p>
        <p class="orange">Pomarańczowy</p>
    </div>
</body>

* {
    margin: 0;
    padding: 0;
}


.circle {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px white solid;
    z-index: 1;
}


div:nth-child(1) {
    top: 20px;
    left: 20px;
    background-color: red;
}

div:nth-child(2) {
    top: 20px;
    right: 20px;
    background-color: green;
}

div:nth-child(3) {
    bottom: 20px;
    left: 20px;
    background-color: blue;
}

div:nth-child(4) {
    bottom: 20px;
    right: 20px;
    background-color: orange;
}


.bg {
    width: 100%;
    height: 100vh;
    background-color: grey;
    transition: 3s;
}

div:nth-child(1):hover~div.bg {
    background-color: red;
}

div:nth-child(2):hover~div.bg {
    background-color: green;
}

div:nth-child(3):hover~div.bg {
    background-color: blue;
}

div:nth-child(4):hover~div.bg {
    background-color: orange;
}

p {

    text-align: center;
    line-height: 100vh;
    font-size: 100px;
    color: white;
    opacity: 0;
    transition: 3s;
}

div:nth-child(1):hover~div.bg p.red {
    opacity: 1;
}

div:nth-child(2):hover~div.bg p.green {
    opacity: 1;
}

div:nth-child(3):hover~div.bg p.blue {
    opacity: 1;
}

div:nth-child(4):hover~div.bg p.orange {
    opacity: 1;
}
1

Musiałbyś dodać jeszcze kod html

0 
<body>
    <div class="red circle"></div>
    <div class="green circle"></div>
    <div class="blue circle"></div>
    <div class="orange circle"></div>
    <div class="bg">
        <p class="red">Czerwony</p>
        <p class="green">Zielony</p>
        <p class="blue">Niebieski</p>
        <p class="orange">Pomarańczowy</p>
    </div>
</body>
2

Jesli zmienisz te dwie rzeczy

p {
  color: black;
  opacity: 1;
}

to zauważysz, że 3 dolne paragrafy są pod elementem .bg

0

Dziękuje! Ślepy jestem żeby paska nie zauważyc sugerującego że coś dzieje się niżej :)

0 
* {
    margin: 0;
    padding: 0;
}

.circle {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px white solid;
    z-index: 1;

    &.red {
        top: 20px;
        left: 20px;
        background-color: red;
        transition: color 3s;
    }

    &.green {
        top: 20px;
        right: 20px;
        background-color: green;
        transition: color 3s;
    }

    &.blue {
        bottom: 20px;
        left: 20px;
        background-color: blue;
        transition: color 3s;
    }

    &.orange {
        bottom: 20px;
        right: 20px;
        background-color: orange;
        transition: color 3s;
    }
}

.bg {
    width: 100%;
    height: 100vh;
    background-color: grey;
    transition: 3s;
}

.red:hover ~ .bg {
    background-color: red;
    p.red {
        opacity: 1;
        color: white;
    }
}

.green:hover ~ .bg {
    background-color: green;
    p.green {
        opacity: 1;
        color: white;
    }
    p.red {
        display: none;
    }
}

.blue:hover ~ .bg {
    background-color: blue;
    p.blue {
        opacity: 1;
        color: white;
    }
    p.red,
    p.green {
        display: none;
    }
}

.orange:hover ~ .bg {
    background-color: orange;
    p.orange {
        opacity: 1;
        color: white;
    }
    p.red,
    p.green,
    p.blue {
        display: none;
    }
}

p {
    text-align: center;
    line-height: 100vh;
    font-size: 100px;
    color: white;
    opacity: 0;
    transition: color 3s;
}


<div class="circle red"></div>
<div class="circle green"></div>
<div class="circle blue"></div>
<div class="circle orange"></div>
<div class="bg">
    <p class="red">Czerwony</p>
    <p class="green">Zielony</p>
    <p class="blue">Niebieski</p>
    <p class="orange">Pomarańczowy</p>
</div>

Dokładnie, czyli możesz nie wyświetlać w przypadku najechania na kółko pozostałych klas display: none;

1 użytkowników online, w tym zalogowanych: 0, gości: 1