图像从灰度到正常去我活跃或悬停div

Question

我有一个带有tabify的AJAX框。当我激活或悬停在任何图像上时，我遇到图像从灰度变为正常的问题。连续有4张图片;如果点击它，它将变为正常的颜色，并且应该保持那样，直到另一个被点击，当第一个应该恢复为灰度时。如何才能做到这一点？

该插件可以找到here;下面显示了我想要做的示例图像。

HTML

<div id="key-wrap"> 

<h1>Key Team Members</h1> 

<ul id="keyMember" class="keyMember"> 
<li class="active"><a href="#keyMember1"><div class="keyMember1"></div></a></li> 
<li><a href="#keyMember2"><div class="keyMember2"></div></a></li> 
<li><a href="#keyMember3"><div class="keyMember3"></div></a></li> 
<li><a href="#keyMember4"><div class="keyMember4"></div></a></li> 
</ul> 

<div id="keyMember1" class="content"> 
<h2>Limerick One</h2> 
<p> The limerick packs laughs anatomical<br /> 
In space that is quite economical,<br /> 
But the good ones I've seen<br /> 
So seldom are clean,<br /> 
And the clean ones so seldom are comical. </p> 
</div> 

<div id="keyMember2" class="content"> 
<h2>Limerick Two</h2> 
<p> Let my viciousness be emptied,<br /> 
Desire and lust banished,<br /> 
Charity and patience,<br /> 
Humility and obedience,<br /> 
And all the virtues increased. </p> 
</div> 

<div id="keyMember3" class="content"> 
<h2>Limerick Three</h2> 
Hickere, Dickere Dock,<br /> 
A Mouse ran up the Clock,<br /> 
The Clock Struck One,<br /> 
The Mouse fell down,<br /> 
And Hickere Dickere Dock. 
</div> 

<div id="keyMember4" class="content"> 
<h2>Limerick Three</h2> 
Hickere, Dickere Dock,<br /> 
A Mouse ran up the Clock,<br /> 
The Clock Struck One,<br /> 
The Mouse fell down,<br /> 
And Hickere Dickere Dock. 
</div> 

</div> <!--End Key Wrapper--> 

<script src="jquery.js" type="text/javascript" charset="utf-8"></script> 
<script src="jquery.tabify.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript"> 
     // <![CDATA[ 

     $(document).ready(function() { 
      $('#keyMember').tabify(); 
     }); 

     // ]]> 
    </script> 

CSS

body { 
font: 0.8em Arial, sans-serif; 
} 
#key-wrap { 
width: 1000px; 
margin: 0 auto; 
background: whitesmoke; 
height: 500px; 
padding: 10px; 
} 
.keyMember { 
padding: 0; 
clear: both; 
margin: 0 auto; 
width: 1000px; 
} 
.keyMember li { 
display: block; 
} 
.keyMember li a { 
background: #ccf; 
padding: 10px; 
float: left; 
border-bottom: none; 
text-decoration: none; 
color: #000; 
font-weight: bold; 
width: 228px; 
height: 204px; 
text-align: center; 
line-height: 200px; 
} 
.keyMember li.active a { 
background: #eef; 
} 
.keyMember1 { 
background:url(members/fulanu.jpg) no-repeat center; 
width: 228px; 
height: 204px; 
} 
.keyMember2 { 
background:url(members/fulanu.jpg) no-repeat center; 
} 
.keyMember3 { 
background:url(members/fulanu.jpg) no-repeat center; 
} 
.keyMember4 { 
background:url(members/fulanu.jpg) no-repeat center; 
} 
.content { 
float: left; 
clear: both; 
border-top: none; 
border-left: none; 
background: #eef; 
padding: 10px; 
width: 980px; 
margin: 30px auto; 
} 

Answer 1

HTML和CSS单独可能不会削减它这一点。由于您已经包含jQuery，因此您可能需要查看jQuery的addClass和removeClass方法（jQuery docs）。

您可以将处理程序绑定到每个图像，以便单击时，将根据需要添加或删除CSS类。

Answer 2

我做到了！这是所有的CSS，这是我所做的...

.keyMember1 { background:#CCC; width: 226px; height: 204px; display:inline-block;                                     position:relative;} 
a:hover .keyMember1 { background:#699;} 
li.active .keyMember1 {background:gold; } 

.keyMember2 { background:#CCC; width: 226px; height: 204px; display:inline-block; position:relative;} 
a:hover .keyMember2 { background:#699;} 
li.active .keyMember2 {background:green; } 

.keyMember3 { background:#CCC; width: 226px; height: 204px; display:inline-block; position:relative;} 
a:hover .keyMember3 { background:#699;} 
li.active .keyMember3 {background:blue; } 

.keyMember4 { background:#CCC; width: 226px; height: 204px; display:inline-block; position:relative;} 
a:hover .keyMember4 { background:#699;} 
li.active .keyMember4 {background:red; }