Change element style on hover of another element

Change element style on hover of another element

I have the following HTML code:
<div> class="module-title"
<h2 class="title" style="visibility: visible;">
<span>Spantext</span>
Nonspantext
</h2>
</div>
What I want to do is to hover over the h2 element and both of the spantext
and nonspantext to change color. My limitation is that I cannot put the
Nonspantext inside span tags (I cannot change the HTML code at all).
The problem is that when I put the CSS rule
.title :hover {color:#D01A13;}
only the spantext changes color on hover and when I put the code
.module-title :hover {color:#D01A13;}
the nonspantext will change color if I hover over the spantext but I also
want the opposite to happen.
I am aware of the '+' and '~' rules in CSS but I could not make it work.