Add a hover effect to a span


On the bottom,
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?


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
1 Like

…better still remove the inline-styling altogether. :winky:


 <div class="join ext-comsec">

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


1 Like

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