hover over text then display it as upper case

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • dragon52
    New Member
    • Jun 2009
    • 72

    hover over text then display it as upper case

    Hi,

    I have the following html and css code bits.

    Code:
    <td><span class="familyname">Johnson</span> Pat</td>
    Code:
    .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
    Contributor
    • Jan 2014
    • 300

    #2
    Couldn't you just do this?

    Code:
    <td><span class="familyname">Johnson</span></td> <td><span class="firstname">Pat</span></td>
    Code:
    .familyname:hover {
         text-decoration: none;
         text-transform: uppercase;
    }
    
    .firstname:hover {
         text-decoration: none;
         text-transform: uppercase;
    }

    Comment

    • dragon52
      New Member
      • Jun 2009
      • 72

      #3
      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

      Comment

      • devcake
        New Member
        • Oct 2016
        • 4

        #4
        Hello,

        You can style child element when hover on parent:

        Code:
        <table>
          <tr>
            <td><span class="familyname">Johnson</span> Pat</td>
          </tr>
        </table>
        Code:
        td:hover .familyname {
            text-decoration: none;
            text-transform: uppercase;
        }

        Comment

        Working...