Add a hover effect to a span

[lurtnowski]

On the bottom,
http://stevenh.fatcow.com/test/css.html
I have a div with 2 spans to make the line, when I mouseover the div at the start, the color changes, but how do I make it so the whole div changes color (also the two spans inside it?

[m_hutley]

Your inline CSS is overriding the stylesheet one.

Tag your hover css change as important to let it override inline styling:

.join:hover, .join:hover:after, .join:hover:before,.join:hover i, .join:hover span {
	border-color:red !important
}

[coothead]

…better still remove the inline-styling altogether.

HTML :-

 <div class="join ext-comsec">
  <span></span>
  <span></span>
 </div>

CSS :-

.ext-comsec span:first-of-type {
   right: -1460%;
   top: 80%;
   width: 1460%; 
   height: 30%; 
   border-bottom: 2px solid black; 
   position: absolute;
 }
.ext-comsec span:last-of-type {
   right: -1460%;
   top: -530%;
   width: 450%; 
   height: 630%; 
   border-right: 2px solid black; 
   position: absolute;
 }

.join:hover, .join:hover:after,
.join:hover:before,.join:hover i, 
.join:hover span {
   border-color: red; 
}

Further reading :-

CSS Inline styles and why they are considered harmful for accessibility

coothead

[m_hutley]

In this case, true (though the position: absolute should be folded up into.a higher level class.)