hover over text then display it as upper case

[dragon52]

Hi,

I have the following html and css code bits.

<td><span class="familyname">Johnson</span> Pat</td>

.familyname:hover {
    text-decoration: none;
    text-transform: uppercase;
}

When I hover over the family name it is changed to upper case. This much is working. Like this

from 'Johnson Pat' to 'JOHNSON Pat'

I want to achieve the same result if I hover over any part of the string 'Johnson Pat', not just over the word 'Johnson'. That is if I hover over the word ' Pat' (including the space) it should change to 'JOHNSON Pat'.

Is this possible ??

I would appreciate any help

Thanks

[Luk3r]

Couldn't you just do this?

<td><span class="familyname">Johnson</span></td> <td><span class="firstname">Pat</span></td>

.familyname:hover {
     text-decoration: none;
     text-transform: uppercase;
}

.firstname:hover {
     text-decoration: none;
     text-transform: uppercase;
}

[dragon52]

Hi Luk3r,

Thank you very much for the reply.

As I understand it, your suggestion is not quite what I am after.

I want to always upper the family name and never the given names.

In the culture I am working with when names are translated to English some people put their family name first and some put their's last. I need to find a way to emphasis which is the family name.

It can be ...
"Johnson Pat" to "JOHNSON Pat"
"David Hammel" to "David HAMMEL"

I can easily just underline the family name but it looks ugly when a web page has lots of names. Also I like to know if it can be done.

In other words in css (or other methods) when I hover over any part of the string "Xxxxx Yyy" can I specify which word to change to upper?

thanks

[devcake]

Hello,

You can style child element when hover on parent:

<table>
  <tr>
    <td><span class="familyname">Johnson</span> Pat</td>
  </tr>
</table>

td:hover .familyname {
    text-decoration: none;
    text-transform: uppercase;
}