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

Answer 1

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