css hover issue

Question

Need a quick bit of help please, I have knocked up a quick fiddle.

Link Here: http://jsfiddle.net/ozzy/qaN84/

css:

.outer {
width:210px;
height:180px;
padding:10px;
border:1px solid #aaaaaa;
border-radius:3px;
}
.month {
width:40px;
height:40px;
float:left;
margin:5px 5px;
border:1px solid #aaaaaa;
display:inline;
background-color:#efefef;
}

.month h3 {
font-size:16px;
font-weight:bold;
color:#444444;
text-align:center;
vertical-align:middle;
line-height:18px;
margin-top:10px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
font-family: "proxima-nova-1","proxima-nova-2",Helvetica,Arial,sans-serif;
text-transform:uppercase;
}
#current {
background-color:#dedede;
border:1px solid #ec008c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(255, 255, 255, 0.5) inset;
}

.month h3:hover {
color:#ec008c;
cursor:pointer;
}
.gallLink {
float:right;
margin-right:10px;
}
.gallLink a{
font-family: "proxima-nova-1","proxima-nova-2",Helvetica,Arial,sans-serif;
font-weight:normal;
text-decoration:none;
text-transform:uppercase;
font-size:12px;
color:#3399ff;
}
.gallLink a:hover{
color:#ec008c;
border-bottom:1px dotted #ec008c;
}

html:

<div class="outer">
<div class="month"><h3>jan</h3></div>
<div class="month"><h3>feb</h3></div>
<div class="month"><h3>mar</h3></div>
<div class="month"><h3>apr</h3></div>
<div class="month"><h3>may</h3></div>
<div class="month"><h3>jun</h3></div>
<div class="month" id="current"><h3>jul</h3></div>
<div class="month"><h3>aug</h3></div>
<div class="month"><h3>sep</h3></div>
<div class="month"><h3>oct</h3></div>
<div class="month"><h3>nov</h3></div>
<div class="month"><h3>dec</h3></div>
<div class="gallLink"><a href="/rogues-gallery/">View Gallery</a></div>

What I want is whan user hovers onto one of the month squares, the hover effect kicks in. At the moment it only has effect when I hover over the text.

Also am I coding this the most efficient way possible? with regard to Highlighting current month ?

Or is there a better way.

Any help appreciated

ysrb · Accepted Answer · 2011-07-15 03:15:38Z

2

Is this what you are looking for?

http://jsfiddle.net/qaN84/2/

.month:hover h3 {
color:#ec008c;
cursor:pointer;
}

You may also want to add:

.month:hover{
    cursor:pointer;
}

answered Jul 15, 2011 at 3:15

ysrb

6,7202 gold badges32 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

422 Over a year ago

Thanks... I am going mad here, I just cannot get that code to work on my local machine argghhh.

422 Over a year ago

hahah that was MAD ! yeah cleared cache and its working cheers dude. I cant believe i got my hovers in a muddle :) thankyou. Voted

422 Over a year ago

Back again .. sorry NOPE doesnt work in FF. Apologies have un-voted until we fix the issue. It works in jsfiddle, but we have tested on 3 computers in the office, .. works fine on chrome but not on FF. Did a sample here: sitehelp.com.au/422/grid

422 Over a year ago

Argghh was our doctype ! Voted back up, sorry

ysrb Over a year ago

Try adding this: div.month:hover h3 { color:#ec008c; } div.month:hover { cursor:pointer; } div.month:hover h3 { color:#ec008c; cursor:pointer; }

|

Collectives™ on Stack Overflow

css hover issue

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related