Solved

CSS  link hover

Posted on 2009-07-07
7
544 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
  • 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Unwanted gap in IE11 between header and menu 9 20
Basic JavaScript Question 3 38
Error on Add method 1 38
help squeezing some space out in this site 9 16
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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).

920 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now