想要在单击时更改图像的颜色，以便在单击后保持更改 [英] Want to change the colour of the image when clicked and so that it remain changed after click
问题描述
我想在点击后改变图像的颜色，基本上导航栏中的所有图像都是用css设置的背景图像我有另一个具有更大不透明度的类（与谷歌加导航栏相同）
我的CSS是：
＃ vtab> ul> li.home {
background：url（''images / home21.png''）无重复中心;
} < br $> b $ b
#vtab> ul> li.selected {
opacity：1;
-ms-filter：progid：DXImageTransform.Microsoft.Alpha（Opacity = 100）;
filter：progid：DXImageTransform.Microsoft.Alpha（Opacity = 100）;
border-right：none;
z-index ：-1;
职位：相对;
}
#vtab> ul> li：悬停，＃logt> ul> li：active，＃vtab> ul> li：focus，＃vtab> ul> li：访问{
opacity：1;
-ms-filter：progid：DXImageTransform.Microsoft.Alpha（Opacity = 100）;
filter：progid：DXImageTransform.Microsoft.Alpha（Opacity = 100）;
border-right：none;
z-index ：-1;
位置：相对;
}
HTML：
主页
课程
-
Explore
< img src =images / leftarrow1.pngstyle =高度：88px;宽度：74px; margin-left：-47px; margin-top：-18px;位置：相对
/>
这是列表中设置的导航栏。 />
有关详细信息，我已将此链接上传至：www.adhyay.aargss.com
请查看左侧导航栏，截至现在只给出了悬停效果，但我希望悬停效果在点击之后是永久性的，这与google plus相同。
请帮忙。
<img src="images/leftarrow1.png" style="height: 88px;width: 74px;margin-left: -47px;margin-top: -18px; position:relative"
/>
This is the nav bar set in list .
For more detail I have uploaded this at link : www.adhyay.aargss.com
Please have a look at left navigation bar , As of now only hover effect is given but i want that hover effect to be permanent after click which would be same as google plus.
Please help .
推荐答案
根据我的检查，Google plus使用两组图像 - 一个灰度和一个色彩全部嵌入一个图像中。然后使用css图像精灵，即显示图像的一部分。他们用于悬停和选择的css是相同的。
和一个小建议：
我发现你使用过滤器，IE中不推荐使用的过滤器以及特定于Windows的过滤器。最好使用嵌入在单个图像中的两组图像来加快加载速度。
As per my inspection, Google plus uses two sets of images - one gray scale and anoe coloured all embedded in one single image. they then use css image sprites i.e., display a part of the image. And their css for hover and selected is same.
And a small advice:
I found that you use filters, filters deprecated in IE and are windows specific. It is better to use two sets of images embedded in a single image for faster loading.
这篇关于想要在单击时更改图像的颜色，以便在单击后保持更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
