Jump to content


Photo

CSS Div Hover how to do I make Div's Hover effect?


  • Please log in to reply
26 replies to this topic

#1 SEOLover

SEOLover

    Advanced Member

  • Members
  • PipPipPip
  • 312 posts
  • Gender:Male
  • Location:Norwich, UK
  • Experience:Intermediate
  • Area of Expertise:SEO

Posted 14 August 2007 - 05:45 PM

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? :help:


#2 php_penguin

php_penguin

    richthegeek

  • Privileged
  • PipPipPipPipPip
  • 1,471 posts
  • Gender:Male
  • Location:Manchester, GB
  • Experience:Web Guru
  • Area of Expertise:Coder

Posted 14 August 2007 - 05:52 PM

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.


#3 SEOLover

SEOLover

    Advanced Member

  • Members
  • PipPipPip
  • 312 posts
  • Gender:Male
  • Location:Norwich, UK
  • Experience:Intermediate
  • Area of Expertise:SEO

Posted 14 August 2007 - 06:10 PM

Thank you.

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


#4 SEOLover

SEOLover

    Advanced Member

  • Members
  • PipPipPip
  • 312 posts
  • Gender:Male
  • Location:Norwich, UK
  • Experience:Intermediate
  • Area of Expertise:SEO

Posted 14 August 2007 - 06:18 PM

It worked! Thank you very much indeed! :friends:


#5 Sebastian Sulinski

Sebastian Sulinski

    Forum Newcomer

  • Members
  • Pip
  • 24 posts
  • Location:Bognor Regis, UK
  • Experience:Web Guru
  • Area of Expertise:Web Designer

Posted 14 August 2007 - 07:40 PM

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



#6 Designer Karly

Designer Karly

    Dedicated Member

  • Members
  • PipPip
  • 196 posts
  • Gender:Male
  • Location:Basildon, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 14 August 2007 - 07:47 PM

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 :clapping:


#7 php_penguin

php_penguin

    richthegeek

  • Privileged
  • PipPipPipPipPip
  • 1,471 posts
  • Gender:Male
  • Location:Manchester, GB
  • Experience:Web Guru
  • Area of Expertise:Coder

Posted 14 August 2007 - 07:47 PM

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?


#8 Designer Karly

Designer Karly

    Dedicated Member

  • Members
  • PipPip
  • 196 posts
  • Gender:Male
  • Location:Basildon, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 14 August 2007 - 07:49 PM

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.


#9 Sebastian Sulinski

Sebastian Sulinski

    Forum Newcomer

  • Members
  • Pip
  • 24 posts
  • Location:Bognor Regis, UK
  • Experience:Web Guru
  • Area of Expertise:Web Designer

Posted 14 August 2007 - 08:00 PM

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,


#10 WorldPeace

WorldPeace

    Forum Newcomer

  • Members
  • Pip
  • 38 posts
  • Location:Ireland
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 14 August 2007 - 08:03 PM

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


#11 Daemon Byte

Daemon Byte

    Dedicated Member

  • Members
  • PipPip
  • 198 posts
  • Location:Gillinghan, Dorset, United Kingdom
  • Experience:Web Guru
  • Area of Expertise:Coder

Posted 14 August 2007 - 09:55 PM

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.


#12 DaveWoods

DaveWoods

    Forum Newcomer

  • Members
  • Pip
  • 35 posts
  • Location:Derby UK
  • Experience:Web Guru
  • Area of Expertise:Designer/Coder

Posted 15 August 2007 - 08:49 AM

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.


#13 Daemon Byte

Daemon Byte

    Dedicated Member

  • Members
  • PipPip
  • 198 posts
  • Location:Gillinghan, Dorset, United Kingdom
  • Experience:Web Guru
  • Area of Expertise:Coder

Posted 15 August 2007 - 01:18 PM

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


#14 SEOLover

SEOLover

    Advanced Member

  • Members
  • PipPipPip
  • 312 posts
  • Gender:Male
  • Location:Norwich, UK
  • Experience:Intermediate
  • Area of Expertise:SEO

Posted 15 August 2007 - 05:59 PM

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


#15 lastcrime

lastcrime

    Forum Newcomer

  • Members
  • Pip
  • 96 posts
  • Gender:Male
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 18 August 2007 - 03:01 PM

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.


#16 Sazzad

Sazzad

    Privileged

  • Privileged
  • PipPipPipPip
  • 633 posts
  • Gender:Male
  • Location:New York, New York
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 18 August 2007 - 07:33 PM

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&gt;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/


#17 Sono Juventino

Sono Juventino

    Advanced Member

  • Members
  • PipPipPip
  • 368 posts
  • Gender:Male
  • Location:Oslo, Norway
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 19 March 2008 - 08:22 AM

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


#18 kitcorsa

kitcorsa

    Advanced Member

  • Members
  • PipPipPip
  • 373 posts
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 20 March 2008 - 11:30 AM

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


#19 Daemon Byte

Daemon Byte

    Dedicated Member

  • Members
  • PipPip
  • 198 posts
  • Location:Gillinghan, Dorset, United Kingdom
  • Experience:Web Guru
  • Area of Expertise:Coder

Posted 20 March 2008 - 11:33 AM

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.


#20 kitcorsa

kitcorsa

    Advanced Member

  • Members
  • PipPipPip
  • 373 posts
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 20 March 2008 - 11:39 AM

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 :D

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.


#21 Larry in Mazatlan

Larry in Mazatlan

    Forum Newcomer

  • Members
  • Pip
  • 1 posts
  • Experience:Intermediate
  • Area of Expertise:SEO

Posted 06 November 2008 - 06:09 PM

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.


#22 new2design

new2design

    Forum Newcomer

  • Members
  • Pip
  • 1 posts

Posted 16 September 2011 - 07:42 PM

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.


#23 Samus

Samus

    Privileged

  • Privileged
  • PipPipPipPip
  • 526 posts
  • Gender:Male
  • Location:Hackney, London, UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 17 September 2011 - 01:23 AM

4 year old thread..


#24 nfc212

nfc212

    Advanced Member

  • Members
  • PipPipPip
  • 408 posts
  • Gender:Male
  • Location:Cardiff, UK
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 17 September 2011 - 11:20 AM

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.


#25 Shafiu

Shafiu

    Forum Newcomer

  • Members
  • Pip
  • 19 posts
  • Gender:Male
  • Location:Maldives
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 05 November 2011 - 03:39 PM

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


#26 Samus

Samus

    Privileged

  • Privileged
  • PipPipPipPip
  • 526 posts
  • Gender:Male
  • Location:Hackney, London, UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 05 November 2011 - 04:07 PM

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;}


#27 bradnywells

bradnywells

    Forum Newcomer

  • Members
  • Pip
  • 3 posts

Posted 12 May 2014 - 05:05 AM

The following CSS code wil change the background color of div on hover

 

<!--StartFragment-->    .picColor{
        width:320px;
        height:240px;
        border:5px solid #000000;
    }
    .picColor:hover
    {
        background:#FF2400;
        width:320px;
        height:240px;
    }
 

Full Source...http://www.corelangs.../box/hover.html

 

Bradny






16 user(s) are reading this topic

0 members, 16 guests, 0 anonymous users