The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> OnHover CSS change
inusm
post Feb 27 2011, 09:43 PM
Post #1


Newbie
*

Group: Members
Posts: 16
Joined: 29-January 11
Member No.: 13,739



How can I get the bottom-border to change its color accordingly to which button is hovered over?

CODE
<!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">
.bottom {
    border-bottom: 1px solid #0FF;
}
.bottom1 {
    border-bottom: 1px solid #0FF;
}
.bottom2 {
    border-bottom: 1px solid #000;
}
.bottom3 {
    border-bottom: 1px solid #CCC;
}
.bottom4 {
    border-bottom: 1px solid #FFF;
}
.bottom5 {
    border-bottom: 1px solid #FFF000;
}
li {
display: inline;
}
</style>
</head>

<body>


<div class='bottom'>
<ul>
<li><a href='somewhere1'>Button #1</a></li>
<li><a href='somewhere2'>Button #1</a></li>
<li><a href='somewhere3'>Button #1</a></li>
<li><a href='somewhere4'>Button #1</a></li>
<li><a href='somewhere5'>Button #1</a></li>
</ul>
</div>

</body>
</html>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies(1 - 9)
Frederiek
post Feb 28 2011, 02:50 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Something like this:
...
<li><a href="somewhere1" class="button1">Button #1</a></li>
...

CODE
a.button1:hover {
   border-bottom: 1px solid #0FF;
}

If you want each link to have another border-bottom, then give each link another class that you style in a similar way as above.

See the FAQ at http://htmlhelp.com/faq/html/links.html#link-hover and the QA's before that one.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
inusm
post Feb 28 2011, 10:53 AM
Post #3


Newbie
*

Group: Members
Posts: 16
Joined: 29-January 11
Member No.: 13,739



I actually wanted to change the color of the border class 'bottom' where the bottom-border spans across the entire div instead of just the link.

This post has been edited by inusm: Feb 28 2011, 10:53 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Barthal
post Feb 28 2011, 10:55 AM
Post #4


Member
***

Group: Members
Posts: 50
Joined: 22-November 10
Member No.: 13,209



I think you may need javascript or jquery for that

This post has been edited by Barthal: Feb 28 2011, 10:56 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
inusm
post Feb 28 2011, 10:59 AM
Post #5


Newbie
*

Group: Members
Posts: 16
Joined: 29-January 11
Member No.: 13,739



Could a mod move this topic to the js programing forum please?

As expected, staying with simple html doesn't work. >_<
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 28 2011, 11:07 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Then use :hover with .bottom, .bottom1 and so on rather than with A. You can use hover with any element, but it only works with links in IE6 and older, but maybe that isn't a big issue.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
inusm
post Feb 28 2011, 11:11 AM
Post #7


Newbie
*

Group: Members
Posts: 16
Joined: 29-January 11
Member No.: 13,739



Could you demonstrate how it works? I am a little confuse as to how to structure this.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 1 2011, 05:09 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Oh crap! I missed that you wanted different borders when different links were hovered. I move. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 1 2011, 10:13 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Here's a JS idea. The color's hex value (without the # sign) is set in the class attributes:

CODE
<style type="text/css" media="screen">
li {display: inline;}
</style>

<ul id="nav">
<li><a href='somewhere1' class="f00">Button a</a></li>
<li><a href='somewhere2' class="00f">Button b</a></li>
</ul>

<script type="text/javascript">
var nav=document.getElementById('nav');
var a=nav.getElementsByTagName('a');
for(var i=0; i<a.length; i++)
{
    a[i].onmouseover=function()
    {
        nav.style.borderBottom='solid #'+this.className;
    }
    a[i].onmouseout=function()
    {
        nav.style.borderBottom='0';
    }
}
</script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 1 2011, 10:14 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Just for fun here's a CSS version also. Not sure if it's as reliable as using JS:

CODE
<style type="text/css" media="screen">
ul {
position: relative;
width: 50%;
height: 1.6em;
margin: 0;
padding: 0;
list-style: none;
color: #000;
background: #eee;
}

li {display: inline;}

a:hover {border: 0;} /* necessary for IE6 */

a:hover span {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

a.a:hover span {border-bottom: solid red;}
a.b:hover span {border-bottom: solid blue;}
</style>

<ul>
<li><a href='somewhere1' class="a">Button a<span></span></a></li>
<li><a href='somewhere2' class="b">Button b<span></span></a></li>
</ul>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 30th March 2024 - 12:06 AM