Hover Reveals Text

Discussion in 'Web Design and Development' started by swwack91, Jan 7, 2012.

  1. swwack91 macrumors 6502a

    Joined:
    Jan 28, 2007
    Location:
    New Jersey
    #1
    Hi all,

    I'm trying to put together a very simple website and only have a basic working knowledge of DreamWeaver and HTML... but I want to figure this out and I'm hoping y'all can help!

    I'm trying to have a list of titles down one column. When you hover over one of those projects, it reveals a paragraph elsewhere on the page describing it. I want all of the descriptions to be in the exact same place. If they could fade in and fade out, that would be EVEN BETTER.

    Where would I even begin?
     
  2. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #2
    Set it up so that the text is set to display:none unless the element in your list is being :hover-ed over.
     
  3. lucasgladding macrumors 6502

    Joined:
    Feb 16, 2007
    Location:
    Waterloo, Ontario
    #3
    I would use jQuery. You would register a hover event for the link, then update the description using a load event, probably using the "rel" attribute on the link for the URL. Off the top of my head, something like this:

    Code:
    $(function(){
      $("#titles a").hover(function(){
        var descriptionURL = $(this).attr("rel");
        $("#description").load(descriptionURL);
      });
    });
    
    The descriptions could then be stored in separate files, with those filenames being used for the "rel" attribute in the links.

    I haven't checked anything, so someone please correct me if I'm mistaken on anything. There are several ways to do this, so you might get several answers.

    Note that you need to include jQuery in your header.

    PS: You'll want to familiarize yourself with jQuery if you're doing this kind of thing often. I suspect you'll have questions, so let me know if you want me to whip up a quick example and I'll see what I can do.
     
  4. lucasgladding macrumors 6502

    Joined:
    Feb 16, 2007
    Location:
    Waterloo, Ontario
    #4
    What the heck, here's a very quick example.
     

    Attached Files:

  5. kemo macrumors 6502a

    kemo

    Joined:
    Oct 29, 2008
    Location:
    ProtonVPN
    #5
    How about to use both: the CSS version and jQuery one to keep it working for both, the users with JS enabled and disabled :)
     
  6. lucasgladding macrumors 6502

    Joined:
    Feb 16, 2007
    Location:
    Waterloo, Ontario
    #6
    Assuming the OP is still reading this, I'm not sure whether CSS can be used without some very messy code (including the HTML description inside the element being hovered and doing some absolute positioning on the description to make it appear where you want on the page).

    For something that degrades well, I would link to another page that appears in a new window. When javascript is disabled, that link will be used.

    IMHO, degrading gracefully isn't always necessary, and this strikes me as one such situation.
     
  7. kemo macrumors 6502a

    kemo

    Joined:
    Oct 29, 2008
    Location:
    ProtonVPN
    #7
    Well, once the paragraphs would be some direct childs of hovered items then I guess it doesnt have to be a messy code just easy: li:hover p {display:block;} statement, anyway jQuery would be the best way to go probably.. and linking to another page is a good approach because once we start talking about touch devices - there is no hover event - just click :)active), right ?:)
     

Share This Page