CSS transition transform

Question

I would like to ask if there's a way to only rotate the icon when the mouse is over the whole text?

Code looks like this:

.text .icon {
  vertical-align: middle;
  font-size: 40px;
  
  transition: transform 0.5s;
}

.icon:hover {
  transform: rotate(360deg);
}

.text {
  margin: 0 auto;
  clear: both;
  font-size: 23px;
}

<p class="text">
  <span class="icon">i</span><a href="#" target="_blank">Text</a>
</p>

The icons spins, but only with mouse over itself.

Thanks

Answer 1

You can use .text:hover .icon as the selector and it will rotate when hovering over the p element.