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,920 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,920 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,512 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ź 437 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 585 wizyt

:hover innego diva

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

...