Jump to content
pdxGray

A:hover Advice Please?

Recommended Posts

how do i size a link so when the mouse rolls over it creates a background column for the length of the page? Tried: <li><a href>1399 </a></li> a:hover{background-color:yellow;background-height: auto;} also tried w/a px value but not use. Saw the effect on a website & wanted to try & recreate it. ( Nope can't find the link I used or i'd ckeck the page source )thank you

Share this post


Link to post
Share on other sites

there is no background-height? unless it is a css3 <li><a href="#">1399 </a></li> you have to define the default value for anchor, and anchor are usual given a display: block; so you can define their area

  a{display:block;background-color:red;height: 25px;line:height: 25px; /*vertical align text*/float:left;padding: 0 10px;} a:hover{background-color:yellow;}

for the hover you only define the styling that will change ie the background-color: for the length of page you have to include

html, body {height:100%; position:relative;} 

then change anchor styling to

a {position:absolute;background-color:red;min-height:100%;top:0;left:0;right:0;bottom:0;}

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Wow...Thank you dsonesuk that gave me a really interesting and unexpected effect. actually I had several inline links and wanted the bar to go from link to link. Didn't think to mention because didn't think it would matter.With your method & using a:hover the various links change while the red bars remain on the first one. But you can see the number change when you scroll on the others. So that was interesting. will play w/that some more. <li><a href>1399 </a></li><li><a href>1499 </a></li><li><a href>1599 </a></li>as the mose rolled over each one. I am also checking into creating a dive and maybe use rollover/js to animate it. but was really hoping to find my way w/out using js.

Share this post


Link to post
Share on other sites

Wanted to post that I am closer to my solutiong. tried the code below & it is working. Still thank you dsonesuk could not have done w/out you pointing me in the right direction.Now I need to find a way to animate it some more. a:hover{position:absolute;background-color:blue;min-height:100%;max-width: 70px;//top:0;//left:0;//right:0;//bottom:0;}

Share this post


Link to post
Share on other sites

Actually (& sorry to keep adding to this instead of all in one message) I see my hover column is covering the rest of the texts and divs below the links.Any suggestions on how I can make it appear behind them? should I sent a negative z position?

Share this post


Link to post
Share on other sites

I honestly can't make out what you are trying to achieve here? this is the normal setup for hover effect using unordered list

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">ul, li {list-style-type:none; margin:0; padding:0; text-indent:0;}a{display:block;background-color:red;height: 25px;line:height: 25px; /*vertical align text SHOULD MATCH HEIGHT VALUE*/float:left; /* use to stace side by side OR comment out to stack above eace other*//*padding: 0 10px; use for non-fixed width*/text-align:center; /*use for fixed width */width:70px; /*fixed width*/} a:hover{background-color:yellow;}</style></head><body><ul><li><a href>1399 </a></li><li><a href>1499 </a></li><li><a href>1599 </a></li></ul></body></html>

Share this post


Link to post
Share on other sites

Hi, I want the hover background to use the entire length of the body of the document. so when the user's mouse hover over one of the link the background hover will be the width of the link(give or take) but run for the length of the background. Got that so far. but the hover background is covering up the text and images below the link. Partially solved that by changing the opacity. But was wondering if there was a way to set it so the hover column would appear below the other elements in the body.

Share this post


Link to post
Share on other sites

Setting a negative z-index will send the elements to the back, behind the rest of the elements. As for animation, you might be able to use the new CSS transitions. But they won't work in older browsers.

Share this post


Link to post
Share on other sites

So far the z setting does't work w/the hover properties. Also can't figure out why but if you folks take a look at the attached image when I roll over the links, one of the number disappears. it should read 1399 1499 1599 1699 1799 but some of the dates in this case the 1699 vanished. i see nothing in the code that could cause this?

post-80262-0-54920700-1320701433_thumb.png

Share this post


Link to post
Share on other sites

Sure thank you for taking the time to look at it & replying. I think removing the absolute from the a:hover properties in css might work. but it also removes the column effect. <div id = box1><ul id=list1><li><a href>1399 </a></li><li><a href>1499 </a></li><li><a href>1599 </a></li><li><a href>1699 </a></li><li><a href>1799 </a></li><li><a href>1899 </a></li></ul></div> css body {height:100%; position:relative;} a:link {text-decoration:none;color:#fff;}a:hover{color:#fff;position:absolute;background-color:blue;opacity:0.5;min-height:100%;max-width: 70px;//z-index: 1;//top:0;//left:0;//right:0;//bottom:0;} #box1{align: center;border:5px solid #000;//padding:10px 40px;margin-bottom:10px;margin-left: 30px;background: #CC3300;width:1100px;height: 150px;}

Share this post


Link to post
Share on other sites

total rethink on this, OK! to get this to work forget using the anchor, and use sublevel ul element instead, as used for a normal menu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">html, body {height:100%; background-color: #F0F095; }#menu_wrapper {width:900px; margin: 0 auto; height:150px; background-color: #CC3300; border: 4px solid #000;}#menu{margin:15px;border: 4px solid #000; height:25px;}#menu ul{width:960px; position:absolute; height:100%;}#menu ul, #menu li {list-style-type:none; margin:0; padding:0; text-indent:0;}#menu ul li{ width:70px; float:left;min-height:100%;position:relative; }#menu ul ul {position:absolute;min-height:100%;width:70px; left: -32em; background-color:#FFFF00; z-index:0;}#menu ul li:hover ul {left:0; top:25px;}#menu ul li:hover{background-color:yellow;}#content {position:relative; z-index:999;}a{width:100%;line-height: 25px; /*vertical align text SHOULD MATCH HEIGHT VALUE*/float:left; /* use to stace side by side OR comment out to stack above eace other*/text-align:center; /*use for fixed width */} #wrapper {min-height:100%; background-color:#F1CA49; width: 1000px; margin: 25px auto;}</style></head><body><div id="wrapper"><div id="menu_wrapper"><div id="menu"><ul><li><a href>1399 </a><ul><li> </li></ul></li><li><a href>1499 </a><ul><li> </li></ul></li><li><a href>1599 </a><ul><li> </li></ul></li><li><a href>1699 </a><ul><li> </li></ul></li><li><a href>1799 </a><ul><li> </li></ul></li><li><a href>1899 </a><ul><li> </li></ul></li></ul></div></div><div id="content"><p>Ullamco laboris nisi ut labore et dolore magna aliqua. Ut enim ad minim veniam,  excepteur sint occaecat eu fugiat nulla pariatur. Quis nostrud exercitation  duis aute irure dolor lorem ipsum dolor sit amet.</p><p>Sed do eiusmod tempor incididunt in reprehenderit in voluptate ut enim ad  minim veniam. Ullamco laboris nisi eu fugiat nulla pariatur. Excepteur sint  occaecat quis nostrud exercitation mollit anim id est laborum. Lorem ipsum  dolor sit amet.</p><p>Duis aute irure dolor eu fugiat nulla pariatur. Consectetur adipisicing elit,  sunt in culpa in reprehenderit in voluptate. Ullamco laboris nisi sed do eiusmod  tempor incididunt qui officia deserunt. Duis aute irure dolor cupidatat non  proident, velit esse cillum dolore. Ut enim ad minim veniam, lorem ipsum dolor  sit amet, excepteur sint occaecat.</p><img src="../images/myimage.png" alt="" /></div></div></body></html>

to give you an idea what happening, the sublevel are position left:-32em relative from their li parent that are using position: relative, when you hover over the li element the sublevel ul is brought into view directly below and left of its parent li using

#menu ul li:hover ul {left:0; top:25px;}

to hide the sublevel ul completely change #menu ul ul {position:absolute;min-height:100%;width:70px; left: -32em; background-color:#FFFF00; z-index:0;} to

#menu ul ul {position:absolute;min-height:100%;width:70px; left: -99999em; background-color:#FFFF00; z-index:0;}

this will hide completely out of view of the browser window area

Share this post


Link to post
Share on other sites

You have the z-index set to 1. Try -1. That should push it back. EDIT: And if that doesn't work, try adding the z-index to the #box1 div. You'll have to give it relative positioning too since z-index only applies to elements with positioning other than static. BTW, CSS comments do not use // they use /* ... */ /*z-index: -1*/

Edited by ShadowMage

Share this post


Link to post
Share on other sites

Wow...!dsonesuk you got it! Thank you will study, memorize and review your code and info. Thank you for the assist!ShadowMage (sorry i thought the name was dweller, must have just speed read that block) I have read in various books different opinions on the // vs /* */ one writer recommended using only // per line. others say for blocks of texts it is ok to use /* at the start and */ at the end.As far as I can tell it seems to work either way.Thank you both for your time and looking at my questionD

Share this post


Link to post
Share on other sites

CSS comments never use //, that's only in PHP, C++, Java. CSS only uses /* */

Share this post


Link to post
Share on other sites
As far as I can tell it seems to work either way.
The reason it "works" both ways is because browsers ignore invalid properties. When you use // you are essentially telling the browser you want to set the "//z-index" property to -1, but there is no such thing as a "//z-index" property so the browser ignores it. If you look at your error console, it will show you a bunch of CSS errors (if you have CSS error reporting turned on) pointing to these invalid properties.The true syntax for CSS comments is /* */

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...