Solved

CSS  link hover

Posted on 2009-07-07
7
541 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

706 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

19 Experts available now in Live!

Get 1:1 Help Now