当鼠标选中类别文字时，相对应的图片就会高亮出来 这要怎么实现

[iamgoodhuman]

最好有个例子

[香蕉猪]

最好楼主会结帖，，，最讨厌不结帖的人了。。。

<!DOCTYPE html>
<html>
<head>
	<style>
		#J_Roller div{width:100px;float:left;height:40px;line-height:40px;padding:auto;}
		#myImg img{opacity:0.3;}
	</style>
</head>
<body>

	<p>滑过 就 触发了</p>
	<div class="roller" id="J_Roller">
        <div onmouseover="myFunction('mg')" onmouseout="myF2()">玫瑰</div>
        <div onmouseover="myFunction('hh')" onmouseout="myF2()">荷花</div>
        <div onmouseover="myFunction('pgy')" onmouseout="myF2()">蒲公英</div>
    </div>
	<div style="clear:both;"/>

	<div id="myImg">
		<img class="hh" src="http://img.store.sogou.com/net/a/07/link?appid=100520033&url=http%3A%2F%2Fwww.langya.cn%2Flyxw%2Fzhdlypk%2F201406%2FW020140618342166848567.jpg" style="width:200px;height:120px;"/>
		<img class="mg" src="http://thumbnail.image.rakuten.co.jp/@0_mall/pistil/cabinet/02769696/img64253494.jpg" style="width:200px;height:120px;"/>
		<img class="hh" src="http://file12.mafengwo.net/M00/92/C9/wKgBpU4jn3CJOfbAAAGnItHffiM32.groupinfo.w200.jpeg" style="width:200px;height:120px;"/>
		<img class="hh" src="http://img.store.sogou.com/net/a/03/link?appid=100520033&url=http%3A%2F%2Fwww.klmhw.com%2Fuploads%2Fallimg%2F130812%2F1-130Q20UT00-L.jpg" style="width:200px;height:120px;"/>
		<img class="mg" src="http://www.tghua.com/static/flower_team/2011/0605/13072415894187_index.jpg" style="width:200px;height:120px;"/>
		<img class="pgy" src="http://img4.duitang.com/uploads/item/201208/22/20120822095241_83JTc.jpeg" style="width:200px;height:120px;"/>
		<img class="pgy" src="http://img5q.duitang.com/uploads/item/201203/26/20120326220132_KRLCr.jpeg" style="width:200px;height:120px;"/>
		<img class="mg" src="http://www.tghua.com/static/team/2014/0512/13999088903744.jpg" style="width:200px;height:120px;"/>
		<img class="hh" src="http://cache1.tuanimg.com/deal/deal_image/0043/6069/normal/6ed267dc-2421-4f06-ac6c-05242b134bf6.jpg" style="width:200px;height:120px;"/>
	</div>

	<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
	<script>
		function myFunction(job)
		{
			var newClass="."+job
			$(newClass).css("opacity","1");
		}
		function myF2(){
			$("img").css("opacity","0.3");
		}
	</script>

</body>
</html>

[chanel_1]

说个大致的思路，你可以给右边的导航一个自定义属性并赋值，比如data-toggle,给和它绑定的图片同样的属性及属性值，点击导航的时候，先获取它的data-toggle值，然后遍历图片的这个属性，有同样值的改变图片的opacity,border什么的~