Question

JavaScript 当鼠标选中类别文字时，相对应的图片就会高亮出来

类似于智联招聘这样的
这种效果要怎么实现，有没有例子什么的..

Answer 1

利用CSS 的层叠关系

1. 图片的层级index  为1

2. 给所有的图片覆盖一个大的白色半透明的蒙板,这个蒙板的层级index 为2,这样白透明会覆盖在图片上面,看着有点模糊.

3. 点击对应文字时,用js动态调整对应图片的层级index  为3,这样对应的图片就会在蒙板的上面,相对于其它图片有"高亮"的效果
   

追问

有没有例子.....

追答

javascript

<script type="text/javascript">
$(function(){
$('.command a').click(function() {
$('.image-box img').css('z-index',1);
$($(this).attr('href')).css('z-index',3);
return false;
});
});
</script>

css

* {
list-style: none;
}
.image-box {
width: 100%;
height: 100px;
position: relative;
}
.image-box ul li {
display: block;
float: left;
}
.image-box ul li img {
height: 100px;
margin-right: 10px;
position: relative;
z-index: 1;
}
.image-box .filter {
background: #fff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
filter:alpha(opacity=50);
opacity: 0.5;
}

html

<div class="image-box">
<ul>
<li>
<img src="1.jpg" alt="" class="one" />
</li>
<li>
<img src="2.jpg" alt="" class="one" />
</li>
<li>
<img src="3.jpg" alt="" class="two" />
</li>
<li>
<img src="4.jpg" alt="" class="two" />
</li>
</ul>
<div class="filter">

</div>
</div>

<div class="command">
<a href=".one">1,2张图片高亮</a>
<a href=".two">3,4张图片高亮</a>
</div>

追问

大神 大神 大神 ，最后一个问题，就是当我选择全部时，所有的图片都是高亮显示，这个怎么添加。，并且图片高亮显示的时候，图片还有一个边框。求大神指点。燃眉之急。悬赏分我尽我最大的可能给您。

追答

所有图片高亮

$('.image-box img').css('z-index',3);

图片边框只要加上border属性可以了

$('.image-box img').css({
'z-index':3,//层级变为3
'border':'1px solid red'//变框变为1个像素,实线,红色
});

jquery中.css 方法是用于改变css样式的,支持对象传参

追问

大神 能加个QQ吗？还有小瑕疵问题需要求助..

追答

扣是 三295三三9三80