Solved

CSS  link hover

Posted on 2009-07-07
7
547 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

856 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