Hover Reveals Text

[swwack91]

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?

 

[IgnatiusTheKing]

Set it up so that the text is set to display:none unless the element in your list is being :hover-ed over.

 

[lucasgladding]

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?

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:

$(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.

 

[lucasgladding]

What the heck, here's a very quick example.

 

[kemo]

How about to use both: the CSS version and jQuery one to keep it working for both, the users with JS enabled and disabled

 

[lucasgladding]

How about to use both: the CSS version and jQuery one to keep it working for both, the users with JS enabled and disabled

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.

 

[kemo]

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.

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 ?