...

View Full Version : Need text only hover for navlist



AlexanderC
07-09-2011, 08:14 PM
Hi,

I'm a novice and need help with this navlist.

I want the text to only become underlined when the text is hovered over. As it is now the underline appears when the any part of the box is hovered over.

Thanks in advance for your suggestions.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<style type="text/css">

.menu ul{
list-style-type:none;
padding:0;
margin:0;
}

.menu li{
float:left;
position:relative;
z-index:100;
}

.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

.menu a, .menu :visited {
display:block;
font-size:10px;
width:140px;
color:#000;
background:#000;
text-decoration:none;
text-align:center;
font-family:verdana, sans-serif;
padding-top: 7px;
padding-right: 0;
padding-bottom: 7px;
}
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
text-decoration: none;
}

.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}


a:link {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: underline;
color: #999999;
}

</style>
</head>






<body>

<div class="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="index.html">gallery</a>
<ul>
<li><a href="#">black and whites</a></li>
<li><a href="#">colors</a></li>
</ul>
</li>
<li><a href="#">purchases</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>

</body>
</html>

Sammy12
07-09-2011, 08:27 PM
Wrap the a in a "span"



span { display: inline; }



<a href="#">
<span>Rada</span>
</a>

AlexanderC
07-09-2011, 10:15 PM
Tried it but nothing. the code I put in is below.

I was also told to apply the hover to the list item and make that the size of the top tabs. However, I don't really know what that means.



.span { display: inline; }





<li><a href="#"><span>home</span></a></li>

Sammy12
07-10-2011, 04:15 AM
try making it


span:hover {
text-decoration: underline;
}


instead of the a:hover

AlexanderC
07-10-2011, 07:39 AM
That worked on the "home" link as long as I didn't put a span tag on any of the others. When I did then none got underlined plus it did some really weird positioning/element duplication stuff...

That seemed like a good guess though. To me it seems to be the problem that the li tags are selectable instead of just the link. I can't figure out why that is. Any thoughts?

Sammy12
07-10-2011, 08:24 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<style type="text/css">
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}

.menu li{
float:left;
position:relative;
z-index:100;
}

.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

.menu a, .menu :visited {
display:block;
font-size:10px;
width:140px;
color:#000;
background:#000;
text-decoration:none;
text-align:center;
font-family:verdana, sans-serif;
padding-top: 7px;
padding-right: 0;
padding-bottom: 7px;
}
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
text-decoration: none;
}

.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}


a:link {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
span:hover {
border-bottom: #FFF 1px solid;
color: #FFFFFF;
}
a:active {
text-decoration: underline;
color: #999999;
}

</style>
</head>
<body>

<div class="menu">
<ul>
<li><a href="#"><span>home</span></a></li>
<li><a href="index.html"><span>gallery</span></a>
<ul>
<li><a href="#"><span>black and whites</span></a></li>
<li><a href="#"><span>colors</span></a></li>
</ul>
</li>
<li><a href="#"><span>purchases</span></a></li>
<li><a href="#"><span>about</span></a></li>
<li><a href="#"><span>contact</span></a></li>
</ul>
</div>
</body>
</html>


hovering over: the text
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-7.png

hovering over: NOT the text
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled2-1.png

the text is only underlined when hovering over it. isnt this what you wanted?

AlexanderC
07-10-2011, 09:16 PM
That's working better than I had it. Thanks! So, the text gets underlined when hovered over, but when the boxes are hovered over I still get a pointy finger (although no underline). If the boxes are then clicked it activates the a:active rule and thus the link. So the one issue remaining is how to get rid of this pointy finger when the cursor is only over the box. Thanks again for sticking with me on this!

(oddly enough as long as each link was a dummy link it would disappear permanently after being clicked on. Replacing it with an actual link fixed this.)

Sammy12
07-10-2011, 09:21 PM
with cursor: you can toggle a cursor style.

there is

http://www.w3schools.com/cssref/pr_class_cursor.asp
cursor: default; (arrow)
cursor: text; (text thingy :P)
cursor: pointer; (pointer - links)

try setting { cursor: default; } and span { cursor: pointer; }

warning! by setting "a" and "span", you are setting this style for ALL "a"s and "span"s for the ENTIRE page. So you might want to set a class so that these changes only apply to this one situation

AlexanderC
07-14-2011, 08:08 PM
Thanks a lot for your suggestions. This was getting convoluted though so I went back to my old menu. Although this one is working better I'm having a similar problem.

Check it out if you want, I'm posting it as a new thread and it would be great to have your suggestions



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum