Logowanie

Jak zrobić dwa efekty :hover po najechany na jednego diva?

pytanie zadane 29 marca 2018 w HTML i CSS przez lukasz281992 Nowicjusz (190 p.)

Witam!

Czy może mi ktoś powiedzieć jak zrobić, żeby ten kod działał prawidłowo? A mianowicie chcę, aby po najechaniu kursorem myszki na dowolną część diva o klasie "a" zmieniało się dodatkowo opacity napisu, który znajduje się w divie "b".

Domyślam się, że diva "b" trzeba powiększyć do rozmiaru diva "a", a następnie je na siebie nałożyć, ale nie mam pojęcia jak to zrobić.

Z góry dziękuję za odp :)

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>

<body>
    <nav>
        <div class="a"><i class="fas fa-baseball-ball"></i>
            <div class="b"> ball</div>
        </div>
    </nav>
</body>

body {
    font-size: 100px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

nav {
    background-color: aqua;
    width: 100%;
    height: 190px;
    text-align: center;
}

.a {
    position: relative;
    background-color: brown;
    width: 200px;
    height: 190px;
    left: 700px;
}

.b {
    font-size: 50px;
    opacity: 0;
    width: 200px;
    height: 190px;
}

.a:hover {
    color: orangered;
}

.b:hover {
    opacity: 1;
}

3 odpowiedzi

odpowiedź 29 marca 2018 przez Alex.Ironside Stary wyjadacz (14,900 p.)
wybrane 29 marca 2018 przez lukasz281992

Najlepsza

.a:hover .b

Uwaga: To zadziala tylko jezeli .b jest dzieckiem .a

Przyklad: https://codepen.io/Alex-Iron/pen/BrryMY

Jezeli element docelowy nie jest dzieckiem musimy uzyc JavaScript

komentarz 29 marca 2018 przez lapacz.kornel Mądrala (6,930 p.)

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

komentarz 29 marca 2018 przez Alex.Ironside Stary wyjadacz (14,900 p.)

Nie o to pyta autor posta

komentarz 29 marca 2018 przez lapacz.kornel Mądrala (6,930 p.)

http://jsbin.com/pesimaweqa/1/edit?html,css,output

chcę, aby po najechaniu kursorem myszki na dowolną część diva o klasie "a" zmieniało się dodatkowo opacity napisu, który znajduje się w divie "b".

komentarz 29 marca 2018 przez lapacz.kornel Mądrala (6,930 p.)

Zły link dałem, już poprawione

odpowiedź 29 marca 2018 przez lapacz.kornel Mądrala (6,930 p.)

odpowiedź 29 marca 2018 przez lukasz281992 Nowicjusz (190 p.)

Podobne pytania

0 głosów

1 odpowiedź 1,103 wizyt

Hover ma zachodzić na rodzicu elementu który jest najechany

pytanie zadane 4 sierpnia 2019 w HTML i CSS przez Grzegorz Mikina Dyskutant (8,060 p.)

0 głosów

1 odpowiedź 390 wizyt

hover zmienia kolor tła dla nie tego diva, na którym znajduje się kursor

pytanie zadane 12 listopada 2018 w HTML i CSS przez Gucci93 Użytkownik (570 p.)

+1 głos

4 odpowiedzi 367 wizyt

:hover innego diva

pytanie zadane 24 maja 2021 w HTML i CSS przez Hubert731 Obywatel (1,650 p.)

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...