Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS  link hover

Posted on 2009-07-07
7
Medium Priority
?
552 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
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!

 

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 1000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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).

604 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