CSS hover attributes

making the container of a link react to the link being hovered on

Page 1 of 1

4 Replies - 2450 Views - Last Post: 19 October 2007 - 11:52 PM

#1 scripting_challenged  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 17-October 07

CSS hover attributes

Post icon  Posted 18 October 2007 - 06:38 PM

Basically, I have a DIV.

I have a link in that DIV.

I want to make it so that, when I hover on the link, the DIV changes colour.

How can I go about doing this? Do I have to make a "hover" attribute for the DIV? If so, what is the syntax (where the DIV element is called div.button)?

I doubt it's really necessary, but if you need a code sample, let me know.

This post has been edited by scripting_challenged: 18 October 2007 - 06:41 PM

Is This A Good Question/Topic? 0
  • +

Replies To: CSS hover attributes

#2 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Re: CSS hover attributes

Posted 18 October 2007 - 06:41 PM

hrm yeah that would probably take some java script in which I am not so great at...I don't think css can do that...someone feel free to correct me
Was This Post Helpful? 0
  • +
  • -

#3 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: CSS hover attributes

Posted 19 October 2007 - 08:14 AM

Quote

hrm yeah that would probably take some java script in

I'm quite sure that javascript can do that.
<div style="position: absolute; width: 255px; height: 192px; z-index: 1; left: 10px; top: 15px" id="layer1">
<a href="#" onmouseover="layer1.style.background='red'" onmouseout="layer1.style.background='white'">My link</a>
</div>


As you can see above you can use (onmouseover / onmouseout) events to do that.
If you don't want to change the Div's background color when you move the mouse out of the link, you can remove (onmouseout) event.

If this didn't answers you question please reply.
Regards
Was This Post Helpful? 0
  • +
  • -

#4 mocker  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 466
  • Joined: 14-October 07

Re: CSS hover attributes

Posted 19 October 2007 - 06:47 PM

The ":hover" css tag will change the style of an element with the mouse over it. If you want to change style of one element, when a different one is hovered over though, you'll need to use the javascript code.
Was This Post Helpful? 0
  • +
  • -

#5 csmanoj  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 11
  • View blog
  • Posts: 150
  • Joined: 06-August 07

Re: CSS hover attributes

Posted 19 October 2007 - 11:52 PM

Put your link as a span element inside the anchor tags. Then style the span element using css. No Javascript necessary. I've given a sample html file to explain it. Simple solution but is not standards compliant though (may not work on all browsers)

<html>
<head>
<style type='text/css'>
body
{
	padding: 10px;
}
a
{
	text-decoration: none;
}
.linkButton
{
	background-color: #000000;
	color: #ffffff;
	padding: 10px;
}
a:hover .linkButton /*refers to any linkButton object inside an <a> tag when hovered upon*/
{
	background-color: #aa0000;
}
</style>
<body>
	<a href = 'http://www.dreamincode.net/'>
		<span class='linkButton'>Dream In Code</span>
	</a>
	<a href = 'http://www.gamespot.com/'>
		<span class='linkButton'>GameSpot</span>
	</a>
	<a href = 'http://www.gmail.com/'>
		<span class='linkButton'>Gmail</span>
	</a>
</body>
</html>


Hope that helped.

This post has been edited by csmanoj: 19 October 2007 - 11:56 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1