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

Posts in this topic
inusm   OnHover CSS change   Feb 27 2011, 09:43 PM
Frederiek   Something like this: ... <li><a href=...   Feb 28 2011, 02:50 AM
inusm   I actually wanted to change the color of the borde...   Feb 28 2011, 10:53 AM
Barthal   I think you may need javascript or jquery for that   Feb 28 2011, 10:55 AM
inusm   Could a mod move this topic to the js programing f...   Feb 28 2011, 10:59 AM
pandy   Then use :hover with .bottom, .bottom1 and so on r...   Feb 28 2011, 11:07 AM
inusm   Could you demonstrate how it works? I am a little ...   Feb 28 2011, 11:11 AM
pandy   Oh crap! I missed that you wanted different bo...   Mar 1 2011, 05:09 AM
Christian J   Here's a JS idea. The color's hex value (w...   Mar 1 2011, 10:13 AM
Christian J   Just for fun here's a CSS version also. Not su...   Mar 1 2011, 10:14 AM

« Next Oldest · Client-side Scripting · Next Newest »
 

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

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 03:24 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC