Jak zrobić aby po najechaniu na tekst obracał się obrazek 0 90 stopni?

Question

Cześć, 

Mam nagłówek strony a obok niego zdjęcie, chcę aby po najechaniu na tekst, logo strony obracało się o 90 stopni, ale nie wiem jak to zrobić.

(Szukałem poradników na yt oraz w google, ale znalazłem tylko że po najechaniu na obrazek on się obraca, a mi zależy żeby obracał się obrazek po najechaniu na tekst.) 

 

Kod html:

<div class="navbar-logo">
            <div id="img-name"><img class="navbar-img" src='https://svgshare.com/i/muX.svg' alt='blue square' /></div>
            <div id="name"><a class="navbar-name" href="#">Nazwa Strony</a></div>
        </div>

Kod CSS:

.navbar-logo{
    display: flex;
    float: left;
    position: relative;
}
.navbar-img{
    height: 32px;
}
.navbar-name{
    color: black;
    cursor: default;
    font-size: 32px;
    margin-left: .5rem;
    text-decoration: none;
}
.navbar-logo img a{
    height: 100%;
    width: 100%;
}

 

Answer 1

Np tak https://www.w3schools.com/HOWTO/howto_css_transition_hover.asp

Comments

Nie chodzi mi o to, żeby po najechaniu na element jak w tym przypadku zmieniał kolor, tylko żeby po najechaniu na jeden element obracał się drugi (transition: rotate).

---

Proszę Cię bardzo, do tego poszukaj jak wywołać funkcje przy najechaniu na element i efekt będzie taki sam :)

https://www.geeksforgeeks.org/how-to-rotate-an-html-div-element-90-degrees-using-javascript/

---

ok, dziękuję bardzo za pomoc :)

Answer 2

Poczytaj o selector-ach css [ 1 ] [ 2 ] [ 3 ].

W Twoim przypadku można np. (dałem 45 stopni dla prezentacji)

.navbar-logo:hover .navbar-img {
  transform: rotate(45deg);
}

lub

.navbar-logo:hover img {
  transform: rotate(45deg);
}

lub

.navbar-logo:hover div > img {
  transform: rotate(45deg);
}

 

dodałbym jeszcze np., żeby uzyskać bardziej płynną transformację (animację ruchu)

.navbar-img{
  height: 32px;
  transition: transform 250ms; /* dodane */
}