Solved

CSS  link hover

Posted on 2009-07-07
7
549 Views
Last Modified: 2012-05-07
Hello,
I created a rule which is a colored div box with hot linked text within. I would like to make a hover action in which the surrounding div would change color. Is this possible with CSS?
Thank you.
.menubox {
	background-color: #b5ede4;
	height: 21px;
	width: 156px;
	padding-top: 10px;
	padding-left: 12px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #91519c;
	text-decoration: none;
}

Open in new window

0
Comment
Question by:chodoy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24800089
Yes.
.menubox {
        background-color: #b5ede4;
        height: 21px;
        width: 156px;
        padding-top: 10px;
        padding-left: 12px;
        font-weight: bold;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #FFF;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #91519c;
        text-decoration: none;
}
 
.menubox:hover {
        background-color: #FFF;
        height: 21px;
        width: 156px;
        padding-top: 10px;
        padding-left: 12px;
        font-weight: bold;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #FFF;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #91519c;
        text-decoration: none;
}
</style>

Open in new window

0
 
LVL 5

Expert Comment

by:Jagarm
ID: 24800102
You could do:

.menubox:hover {
   background-color:red;
}

but it may not work in IE, only firefox
0
 
LVL 5

Expert Comment

by:Jagarm
ID: 24800104
Sorry I'm wrong, never mind
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:chodoy
ID: 24800199
Hi Jason,
I'm still missing something. When I apply the link it does not take on the appropriate style for the "menubox"

If I add a class, It then duplicates too much of the box attributes I don't want:

<div class="menubox"><a href="index.html" class="menubox">home</a></div>
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24800230
The :hover attribute will change whatever element is being hovered.  So if you want the div to change, you apply the class to the div only.

If you want the link to change, then you apply the class to the link only (and change it so it matches the link CSS).

If you want the link to change the div, you're now in Javascript territory.
0
 

Author Comment

by:chodoy
ID: 24800255
Yes, I do want the link to change the div. Can you point me in the right direction for the javascript?
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 250 total points
ID: 24800316
Okay, sorry.  I misunderstood the original question.

Here's a sample script adapted from http://www.webmasterworld.com/forum83/8585.htm

<SCRIPT TYPE="text/javascript">
<!--
function mouseover()
{
document.getElementById("thediv").style.backgroundcolor='black';
}
function mouseout()
{
document.getElementById("thediv").style.backgroundcolor='red';
}

//-->
</SCRIPT>

</HEAD>
<BODY>
<DIV style="width:200px;height:200px;border:solid thin black" id="thediv" >
<a href="something" onmouseover="mouseover()" onmouseout="mouseout()">Try me</a>
</DIV>
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question