图像从灰度转换为普通图像处于活动状态或悬停在div上

Question

我有一个带有tabify的AJAX box。当我激活或悬停在我的任何图像上时，我在使图像从灰度变为正常时遇到问题。有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; }