[jacksaidwhat]

Hey guys,

Just wondering what method I should use to create two different hovers over "text one" & "text two" whilst keeping them on the same line.

Obviously placing </p> after "text one" would cause " | text two" to shift down a line. So how do I keep them on one line?

<div style="text-align: center;">
<p class="hover">
text one | text two
</p>
</div>

I'm still new to CSS and learning the ropes, so any help would be amazing.

[craftedpixelz]

Something like this:

HTML:

<div>
  <p><a id="link1" href="#">Text One</a> | <a id="link2" href="#">Text Two</a></p>
</div>

CSS

#link1:hover {
    color: #ccc;
}

#link2:hover {
    color: #333;
}

[jacksaidwhat]

Works a treat buddy. I owe you one.