# SVG Sprites and Transforms and why you got to be careful

## The Problem

With the following CSS the SVG will rotate by 45 degrees and the SVG being referenced by the `<use>` element as well, resulting in a 90 degree rotate.

    div:hover svg { transform: rotate(45deg) }

## The Solution

Selecting only direct children of the element we hover over will solve the issue for good.

    .another-div:hover > svg { transform: rotate(45deg) }

## Note!

The issue is not recreatable in Chrome at the time of writing as Heydon Pickering pointed out. Just made a short check and luckily Chrome gets both the examples above right.