2011-07-15 250 views
0

需要一點點的幫助,我已經敲了一個快速小提琴。css懸停問題

鏈接在這裏: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> 

我要的是煥用戶將鼠標懸停在該月的廣場之一,懸停效果踢進來。目前只有當我將鼠標懸停在文字上時才起作用。

我也編碼這是最有效的方式嗎?關於突出當前月份?

或者還有更好的方法。

任何幫助表示讚賞

回答

2

這是你在找什麼?

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

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

您可能還需要添加:

.month:hover{ 
    cursor:pointer; 
} 
+0

謝謝...我要瘋了這裏,我只是不能得到該代碼在我的本地機器argghhh工作。 – 422

+0

確保您硬刷新並清除緩存。 :) – ysrb

+0

哈哈,那是MAD!是的清理緩存和它的工作歡呼夥計。我無法相信我把我的徘徊在糊塗:)謝謝。投票 – 422