hoverした際に、任意の場所にtransformを適用したい

Question

<div class="button">
	<a href="#"><span class="kaiten">▶</span>こちらをチェック</a>
</div><!--/button-->

.kaiten{
	transition: 1s;
}

.kaiten:hover{
	transform: rotateX(360deg)
}

この方法だと、あくまでもclass="kaiten"の上にhoverしないと、▶が回転しないと思います。

ただ、このピンポイントにホバーさせないと動かないのだとあまりこのCSSのを適用している意味がありません。

そこで、class="button"にホバーした際に、class="kaiten"が回るようにしたいです。

その場合のコードをご教示ください。

JavaScriptは、プロゲートで入門レベルをやったレベルの初心者です。

どうぞよろしくおねがいします。

Answer 1

.button:hover .kaiten {
    transform: rotateX(360deg)
}

Comments

[gua192]

この方法でCSSで適用してみましたが、 .buttonまで回転しなくなりました。
ベンダープレフィックスを設定しないと動作しないのでしょうか？

[kei344]

提示されているのが.buttonが回転するコードではないので、まず問題が再現するコードを質問文に追記してください。

[gua192]

.kaiten{
display: inline-block;
transition: 1s;
}

.button:hover .kaiten {
transform: rotateX(360deg)
}

このように記述をしたら無事周りました。
ありがとうございます。