• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 285
  • Last Modified:

hover on span inside anchor

<div class="course">
	<h3>
		<a href="site_link">
			Log on to <span class="redspan">My</span>Page
		</a>
	</h3>
	<p>Log on to MyPage to update your information.
	</p>
</div>
[code]
This is the CSS:
.main .col2  .course h3, .main .col2  .course h3 .redspan{
	margin-bottom: 0px;
	margin-top:5px;
	color:#FF0000;
	font-weight:bold;
	font-size:18px;
}
.main .col2  .course h3, .main .col2  .course h3 a{
	margin-bottom: 0px;
	margin-top:5px;
	color:#000000;
	font-weight:bold;
	font-size:18px;
}
.main .col2  .course h3 a:hover{
	color:#F0AE00;
}
.main .col2  .course h3 redspan:hover{
	color:#F0AE00;
}

Open in new window


The hover is not making the span change color. How would I do that? I DO NOT want to use an image.
0
Eddie Shipman
Asked:
Eddie Shipman
  • 2
1 Solution
 
LZ1Commented:
Try this for your CSS:
.course h3 a .redspan:hover{
        color:#F0AE00;
	   display:inline-block;
}

Open in new window

0
 
Eddie ShipmanAll-around developerAuthor Commented:
I need the entire text within the anchor to change color when you hover over the anchor, too. I will just use jQuery vs. CSS.

    $(".course h3 a").hover(
      function () {
        $('.redspan').css("color","#F0AE00");
      },
      function () {
        $('.redspan').css("color","#FF0000");
      }
    );
0
 
LZ1Commented:
Then you would simply change your CSS to this:
.course h3 a:hover{
        color:#F0AE00;
         display:block;
}
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now