25 replies to this topic

[SEOLover]

Hey,

I'm building a little navigation for my new website and wondering is it possible to make a CSS Div Hover effect - e.g. divs hover a colour when you rollover them? so the dimensions are width: 150px by height: 30px. It's on a grey background with white text and I want the text to change to grey and the background to an off white when you rollover it.

Is this possible?

[php_penguin]

Yes it is possible to make something hover, my using the pseudo-state ":hover"

for divs, this would be:

div { normal state styling here }
div:hover { hover state styling here}

However, i you were to use this code in IE6, nothing would happen. This is because IE6 only supports the hover psuedo for <a> tags. This is not much of a problem in your case, as it is easy to style links to appear as block elements:

a { display: block; width: 140px height: 20px; padding: 5px;  }
a:hover { change color etc here }

In order to get them to appear linearly, you wil need to use floats.

[SEOLover]

Thank you.

I'll open up dreamweaver and give that a try.

[SEOLover]

It worked! Thank you very much indeed!

[Sebastian Sulinski]

Another quite nice way to do background image in the button and create :hover status is to use <ul> structure.

Create the following on your page:

<ul id="nav">
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="about us">about us</a></li>
<li><a href="#" title="services">services</a></li>
<li><a href="#" title="contact us">contact us</a></li>
</ul>

Now create a stylesheet with the following formatting:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}
#nav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
border: 1px solid #2E4156;
height: 25px;
width: 600px;
}
#nav li {
margin: 0px;
padding: 0px;
float: left;
display: block;
background-attachment: scroll;
background-image: url(nav_hover.gif);
background-repeat: repeat-x;
background-position: 0px 50%;
height: auto;
width: auto;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
text-decoration: none;
color: #f1f1f1;
display: block;
width: 150px;
margin: 0px;
height: 20px;
text-align: center;
padding: 5px 0px 0px 0px;
float: left;
background-attachment: scroll;
background-repeat: repeat-x;
background-position: 0px 50%;
background-image: url(nav.gif);
}
#nav li a:hover {
text-decoration: none;
background-image: none;
}

To make it work download the images from attachment.

I hope you'll find it useful.

Take care,

Attached Files

•  nav.gif   208bytes   414 downloads
•  nav_hover.gif   335bytes   330 downloads

[Designer Karly]

That's really neat, your moving the background position via percentages rather than whole numbers. I never thought about using that method as I always moved mine "-50px" for example. I like it Sebastian, it also eradicates the need for 2 images.

Thanks for the post, i'll be trying this out.

Not bad at all for a first post

[php_penguin]

how is this better than merely having the a:hover change the background image? i suppose first-hover caching is improved, but other than that?

[Designer Karly]

It's exactly that Penguin, the need to load seperate images is uneeded and it's a seamless transition. Plus I like the way it utilises li's.

[Sebastian Sulinski]

What's important here is that two images are applied to two different elements:

one image to <li> tag
and the other to <a> tag

on hover we simply remove image from our <a> tag and this way our <li> background is shown.

Images are in the background so they are precached and there's no problems even with our lovely IE - which I must admit, sometimes drives me mad

Thanks,

[WorldPeace]

I agree with you on that one, it really niggles me waiting for a rollover states to load. Especially in this modern time. CSS is fantastic when used well I think this is a prime example.

It's quite similar but not the same to Ben's CSS rollover tutorial:
http://www.webdesign...p?showtopic=270

Thank you Sebastian

[Daemon Byte]

using css on hover doesn't work in IE without some extra code does it? I remember doing it once and having to get a htc file before I could get IE to work.

[DaveWoods]

using css on hover doesn't work in IE without some extra code does it? I remember doing it once and having to get a htc file before I could get IE to work.

You're partly right, the hover only works on an anchor in IE6 and below but won't work on other elements in the same way that modern browsers do.

However, to get around this you can usually apply the hover effect to the <a> and then use display:block so that it fills it's container.

div {
  width: 200px;
}
a, a:link {
  background-color: #CCC;
  color: #000;
  display: block;
}
a:hover {
  background-color: #000;
  color: #FFF;
}

<div>
  <a href="#">Link</a>
</div>

You'd probably use this more often within a navigational menu and would therefore be using an unordered list but the same principle would apply when applying the width to the <li> and changing the <a> within that to a block level element and then applying the styling to that accordingly.

[Daemon Byte]

cool. sounds a lot easier than the route I had to go through.

[SEOLover]

What a big help, thanks everyone for you help with this. I really do appreciate it.

[lastcrime]

I agree with you on that one, it really niggles me waiting for a rollover states to load. Especially in this modern time. CSS is fantastic when used well I think this is a prime example.

It's quite similar but not the same to Ben's CSS rollover tutorial:
http://www.webdesign...p?showtopic=270

Thank you Sebastian

With some tweaking of this tutorial this worked great, it was the only way that worked for me try to change images on a hover thanks.

[Sazzad]

For navigation I would use a Wiredframemenu. Its a very simple but powerful imageless css code that allows you to get some great hovering outcome. I'll teach you how to make 2 types, one is vertical, the other is horizontal.

Vertical wireframe
Add this to your style.css (modify the colors to your liking)

/************* WireFrame Menu *************/

.wireframemenu{
background-color: #FFF;
border-bottom-width: 0;
width: 100%;
}

* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}

.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.wireframemenu a{
font: bold 11px Tahoma;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #68C7CC;
text-decoration: none;

}

.wireframemenu a:visited{
color: #3EB0B7;
}

html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}

.wireframemenu a:hover{
background-color: #C8EAEC;
color:#3EB0B7;
}

Now add the following to your index or your choice of page where you want the effect to appear

<div class="wireframemenu">
<ul>
<li><a href="#">My Friend Was Here</a></li>
<li><a href="#">Then He Was There</a></li>
<li><a href="#">He Suddenly Vanished</a></li>
<li><a href="#">Where Did He Go?</a></li>
</ul></div>

Heres the Horizontal Menu, I call it topNav

CSS code

/*--------------------------------topNav---------------------------*/
#topNav {
	width:100%; 
	overflow:hidden; 
	border-bottom:0px; 
	margin-bottom:11px; 
	height:25px; 
	font-size:14px;
	text-align: center;
	}
#topNavC1 {
	width:400px; 
	margin:0 auto; 
	margin-top:6px;
	text-align: center;
	}
#topNavC1 ul{
	width:537px; margin:0 0 0 0 0px; display:block; height:25px;
	}
#topNavC1 ul li{
	display:block; float:left; height:21px; margin:0; padding:0;
	}
#topNavC1 ul li a{
	font: bold 12px/21px "Trebuchet MS", Arial, Helvetica, sans-serif; padding:0 14px 0 14px; color:#3EB0B7;
	text-decoration:none; margin:0; height:25px;
	}
#topNavC1 ul li a:hover{
	font: bold 12px/21px "Trebuchet MS", Arial, Helvetica, sans-serif; padding:0 14px 0 14px; color:#83a587;
	background-color:#C8EAEC; text-decoration:none; margin:0; height:25px;
	}

HTML code

<div id="topNav"><div id="topNavC1">

<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div></div>

Demo of all these can be viewed here: http://www.sazzadhos...plate/oasisrit/

[Sono Juventino]

Like another guy said. It is possible to hack IE6 into :hover on other elements with a behavior. Take a look here:
- http://www.danvega.o...-hover-selector

[kitcorsa]

dreamwaver?? is that on of them cheating programs, what ever happened to goog old note pad like i use?? lol

[Daemon Byte]

dreamwaver?? is that on of them cheating programs, what ever happened to goog old note pad like i use?? lol

There is no harm in using such tools to aid you as long as you understand what they are doing. Well unless it's frontpage then you deserve your fingers lopping off for crimes against humanity Personally I avoid them all because they mess up my way of doing things but I see no harm in using them if they help you.

[kitcorsa]

There is no harm in using such tools to aid you as long as you understand what they are doing. Well unless it's frontpage then you deserve your fingers lopping off for crimes against humanity Personally I avoid them all because they mess up my way of doing things but I see no harm in using them if they help you.

lol yeah, they all seem to add loads of un-needed code as well. ive used dreamwaver in the past but i found you need like a 32inch screen or 2 monitors just to be able to see anything through all the different boxes and options etc etc,

i just use good old programers file editor and wamp for local production

i do how ever still use dreamwaver for image coordinates for buttons, but then again ive not done them in 3 years now since uni.

[Larry in Mazatlan]

You can do a hover effect on divs even in IE6...

You're partly right, the hover only works on an anchor in IE6 and below but won't work on other elements in the same way that modern browsers do.

However, to get around this you can usually apply the hover effect to the <a> and then use display:block so that it fills it's container.

I wanted to do a hover background color change effect on a div container with a header and a couple <p>'s inside, and an <a> tag cannot contain elements like that, so i had to find a way to do a hover effect on <div>'s, not just on <a>'s.

I really appreciated the guidance i found on this topic from this forum, so i wanted to post a solution that works for any html element even in IE6 and below.

Apart from here, i also got great info from Dan Vega's post on the CSS hover fix for IE.

Anyway, based on everything, the solution i came up with, since i only need to apply it to one div, is the following:

<div id="foo" onMouseOver="this.className += ' ' + 'hover';" onMouseOut="this.className = this.className.replace('hover', '');">

Then, in your styles, rather than using the ":hover" pseudoclass, just use a regular class, "#foo.hover". Obviously you need to define styles for #foo and for #foo.hover, so that it will turn on and off.

[new2design]

Another quite nice way to do background image in the button and create :hover status is to use <ul> structure.

Create the following on your page:

<ul id="nav">
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="about us">about us</a></li>
<li><a href="#" title="services">services</a></li>
<li><a href="#" title="contact us">contact us</a></li>
</ul>

Now create a stylesheet with the following formatting:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}
#nav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
border: 1px solid #2E4156;
height: 25px;
width: 600px;
}
#nav li {
margin: 0px;
padding: 0px;
float: left;
display: block;
background-attachment: scroll;
background-image: url(nav_hover.gif);
background-repeat: repeat-x;
background-position: 0px 50%;
height: auto;
width: auto;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
text-decoration: none;
color: #f1f1f1;
display: block;
width: 150px;
margin: 0px;
height: 20px;
text-align: center;
padding: 5px 0px 0px 0px;
float: left;
background-attachment: scroll;
background-repeat: repeat-x;
background-position: 0px 50%;
background-image: url(nav.gif);
}
#nav li a:hover {
text-decoration: none;
background-image: none;
}

To make it work download the images from attachment.

I hope you'll find it useful.

Take care,

Can you please tell me what these means "#nav li a:link, #nav li a:visited, #nav li a:active" and how the images are changing?

Edited by new2design, 16 September 2011 - 07:44 PM.

[Samus]

4 year old thread..

[nfc212]

4 year old thread..

The old ones are the best ones. At least at my age I hope so.

Doesn't matter how old a thread is if the subject is of relevance to the user it is still valid.

Else why retain threads for any period of time? Might just as well delete them after a given period and save server space.

[Shafiu]

HEy can any one give me a clear detail of how to hower a div in an html page in dreamweaver cs5 please

[Samus]

HEy can any one give me a clear detail of how to hower a div in an html page in dreamweaver cs5 please

in your css file:

div:hover {color: #FF0000; background: #000000;}

or if you want to apply the hover affect to specific div's

id_name#div:hover {color: #FF0000; background: #000000;} 
class_name.div:hover {color: #FF0000; background: #000000;}