Hi,

This is for a University assignment, I have this title which has 3 words, the second 2 words are links and the first is not. The links are set up to change color when hovered over but unfortunately cant work out how to get the first word to not change color. Here's the code from the page:

<div class="pic">
<br />
<h3>Assessment 1:<a href="week_1.html"> Before</a> | <a href="week_1a_TEMP.html">After</a></h3><br>
<br />
<img src="images/pic2.jpg" alt="My Assessment 1 Site" style="border: 3px solid #ccc;" />
<br />
</div>

And the code from the style sheet:

.pic 
{
float: right;
width: 468px;
padding: 0 20px 20px 20px;
text-align: justify;
}
.pic h3 
{
padding: 0px 0 0px 0;
margin-bottom: 0px;
color: #B0FFBD;
font-size: 16px;
font-weight: 100;
}
.pic h3 a 
{
color: #B0FFBD;
text-decoration: none;
}
.pic h3 a:hover 
{
color: #eee;
}

Any help would be greatly appreciated, thanks!

you need to take out the "h3" from the hover class:

.pic a:hover {
color: #eee;
}

Can you change the width of the image in the hover state without effecting the rest of the page?

you need to take out the "h3" from the hover class

Why? his ".pic h3 a" will ONLY target <a>'s inside an h3 inside of something with the .pic class, which is what he wants, and it works just as it is.

Can you change the width of the image in the hover state without effecting the rest of the page?

Not unless the width is the same in both cases, with and without the hover, otherwise things will jump around when you hover.

otherwise things will jump around when you hover.

Not necessarily

set visibility: hidden; on the original image ( so it still takes up the same space and show an absolutely positioned wider image.