Results 1 to 4 of 4
  1. #1
    Join Date
    Mar 2005
    Location
    Ontario, Canada
    Posts
    1,750

    Question CSS help needed with :hover state

    I would like to create the following visual effect.

    I have a grid like structure of text. Two columns and multiple rows. In the first column I have a bunch of radio buttons, checkboxes etc. Initially I want the second column blank.

    When I hover over any items in the first row, I would like description text to show up in the same row but in the second column. Kind of like a tool tip but alway appearing in the second column.

    I tried doing this with the :hover state using CSS but it was not working correctly. To place the text in the second column but hoverable (is that a real word?) from the first column I created a div with a large padding on the left to shift everything over. This made the hover work but didn't allow me to select items in the first column located "under" the padded div.

    I also tried using Spry's tooltip's but the tool tips are always wrt the mouse location. I want the text to always appear in a specific spot on the screen.

    Is there a way to do this? My next option is to use javascript so that if I hover over one item, I can make a different item appear or disappear as desired.
    C++, 3D OpenGL and Game Programming video tutorials:
    www.MarekKnows.com
    Play my free games: Ghost Toast, Zing, Jewel Thief

  2. #2
    Join Date
    Feb 2005
    Location
    /..
    Posts
    2,595
    Never looked into a pure CSS method but is this any help??

    http://www.javascriptkit.com/javatut...ossmenu2.shtml
    There is an exception to every rule, apart from this one.

  3. #3
    Join Date
    Apr 2004
    Location
    New-Brunswick, Canada
    Posts
    1,177
    Unless you tie your radio-buttons to an anchor tag (<a>), :hover won't work. :hover is a CSS Pseudoclass for Anchors. You're best be using Javascript for this type of functionality. If you REALLY want to use CSS for this *although I don't recommend it with your type of application*, check this out.
    ..:: Martin "Cron-Z" Breault :: Multimedia Designer
    ..:: My NEW Blog :: Insomniac Games Forums Moderator ::..



    [19:50] <Toastage> first you need to know the maya
    [19:50] <Toastage> you need to date the maya
    [19:50] <Toastage> you need to WOO THE MAYA

  4. #4
    Join Date
    Mar 2004
    Posts
    0
    :hover will work on every element in every browser *except* IE6. This will give you an idea on how to use it:

    Code:
    <div class="form-row">
        <div class="form-tooltip">Hey There</div>
        <!-- all other form jazz goes here -->
    </div>
    with CSS like:

    Code:
    .form-row {
        position : relative;
    }
    
    .form-row .form-tooltip {
         display : none;
         position : absolute;
         right : 0px;
         left : 0px;
         border : 1px solid #444;
         background : #eee;
         padding : 2px 5px;
    }
    
    .form-row:hover .form-tooltip {
          display : block;
    }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •