CSS: Changing Span color on mouseover - css

Question

How should I go about changing the color of a span on mouseover? I currently have a tab (like in a menu) that has been classified as a span, let's say .rtsOut with a background color of #595959. Each tab is still classified as the same span, .rtsOut, but is divided into 4 different tabs. When I mouseover, I'd like to change that one tab to to, #000000, and to revert back to #595959 when the mouse is moved off of the span.
I unfortunately don't have access to the whole overlook of CSS like so:
<style>
span:hover {
background: ######;
}
</style>
and instead I have a very simple view like this, where I just input single lines of code:
#SampleThing {visibility: hidden;}
Can anyone help me? I've been Googling, and testing for hours, and can't come up with a solution.
So far, this is what I've found. I believe this is how the span has been created:
<li class="rtsLI"> == $0
<a class="rtsLink tbLeft4" id="TbInformation" href="../Info/Info.aspx">
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">Edit Information</span>
</span>
</span>
</a>
</li>
And I've tried changing the background color of that span using this:
.rtsOut:hover {background: #000000;}
However, that line of code isn't working :(

Answer 1

Take a look at my codePen here
CSS
.rtsOut:hover{
background-color: red;
}
HTML (Assuming it looks like this)
<div>
<p>
<span class="rtsOut">One</span>
<span class="rtsOut">Two</span>
<span class="rtsOut">Three</span>
</p>
</div>
Also note that if you would like some more flexibility down the road, you may want to look into using <ul> and <li> for Nav Menu items.

Answer 2

When I mouseover, I'd like to change that one tab to to, #000000, and
to revert back to #595959 when the mouse is moved off of the span.
.rtsOut:hover {background: #000000;}
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">Edit Information</span>
</span>
</span>

Answer 3

Assuming that your HTML really is:
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">Edit Information</span>
</span>
</span>
and this isn't working:
.rtsOut:hover {background: #000000;}
Then, it tells me that someone has generated styles that are "more specific" than the ones you are providing.
CSS styling rules are applied from "most specific to least specific". For example: parent > .rtsOut { background-color: red; } will take precedence over .rtsOut { background-color: blue; } because it is more specific. As well, inline styles will have one of the highest precedence, so <span class="rtsOut" style="background-color:red;"></span> will override .rtsOut { background-color: blue; }. See http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ for more information.
I would start by adding !important to your styles (as this will always have the highest precedence if nothing else has been given !important), to see if the above is the case.
Also, I would most definitely get used to browser developer tools. They allow you to delve right into the active code and do live edits. You will be able to see if there is an inline style or another style rule that has more precedence over the one you are trying to provide.