[问]鼠标经过,怎么改变另外一个地方的背景图片

默认状态:
鼠标指上去后:
HTML:        <div class="ClassificationPanel">
            <a class="ClassificationIcon Icon1">家具风格</a>
            <span class="ClassificationLink">
                <a href="#">欧式古典</a>
                <a href="#">欧式田园</a>
                <a href="#">美式古典</a><br />
                <a href="#">美式田园</a>
                <a href="#">韩式田园</a>
                <a href="#">韩式古典</a><br />
                <a href="#">更多..</a>
            </span>
        </div>
CSS:.ClassificationPanel
{
    width:360px;
    height:80px;
    display:inline-block;
    background-color:#ffffe0;
    margin:5px 0px 0px 5px;
    float:left;
}
.ClassificationIcon
{
    background-image:url('/images/classificationIcon.png');
    width:86px;
    height:80px;
    display:inline-block;
    float:left;
    text-align:center;
    line-height:130px;
    float:left;
    cursor:pointer;
}
.Icon1
{
    background-position:0px 0px;
}
a.Icon1:hover,a.Icon1:active
{
    background-position :-87px top;
    color:White;
}
上面实现了鼠标指到左侧矩形<a>的区域改变背景
现在想鼠标指到黄色区域(即:<div class="ClassificationPanel">)之后也有同样的效果.
JS或者CSS,应该怎么写.注:obj.style.backgroundPositionX在IE上正常,在360浏览器和FireFox下没反应

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
<style type="text/css">
.ClassificationPanel
{
    width:360px;
    height:80px;
    display:inline-block;
    background-color:#ffffe0;
    margin:5px 0px 0px 5px;
    float:left;
}
.ClassificationIcon
{
    background-image:url('/images/classificationIcon.png');
    width:86px;
    height:80px;
    display:inline-block;
    float:left;
    text-align:center;
    line-height:130px;
    float:left;
    cursor:pointer;
}
.Icon1
{
    background-position:0px 0px;
}
a.Icon1:hover,a.Icon1:active
{
    background-position :-87px top;
    color:White;
}
</style>
    </head>
    <body>        <div class="ClassificationPanel">
            <a class="ClassificationIcon Icon1" onmouseover="set(this)" onmouseout="out()">家具风格</a>
            <span class="ClassificationLink">
                <a href="#">欧式古典</a>
                <a href="#">欧式田园</a>
                <a href="#">美式古典</a><br />
                <a href="#">美式田园</a>
                <a href="#">韩式田园</a>
                <a href="#">韩式古典</a><br />
                <a href="#">更多..</a>
            </span>
        </div>

        <script>
var cur;
function set(t){
t.parentNode.style.backgroundColor = '#a13a35';
cur = t;
}
function out(){
if( cur ){
cur.parentNode.style.backgroundColor = '';
}
}
        </script>
    </body>
</html>这个意思？
试试css伪类就可不可以解决
.ClassificationIcon:hover{
    background：移上去的图片
}
随便用几张图片测试：<script>
function overShow(img){
document.getElementById("pic").src = img;
}
function outShow(){
document.getElementById("pic").src = "images/0002.jpg";
}
</script>
<div>
<div style="float:left">家具风格<br /><img id="pic" src="images/0002.jpg" border="0" /></div>
<div style="float:left;margin-left:50px">
<a href="javascript:void(0)" onmouseover="overShow('images/0004.jpg')" onmouseout="outShow()">欧式古典</a>
<a href="javascript:void(0)" onmouseover="overShow('images/0006.jpg')" onmouseout="outShow()">欧式田园</a>
<a href="javascript:void(0)" onmouseover="overShow('images/0002.jpg')" onmouseout="outShow()">美式古典</a><br />
</div>
</div>
大家注意下,我的意思是,鼠标指到div上改变<a>的背景图,应该怎么做.
css 的话兼容性问题用jquery 吧  ，非常简单
效果一样，不就是鼠标指到汉字上，左边的灰图就变成红图吗：<script>
function overShow(img){
    document.getElementById("pic").style.background = "url("+ img +")";
}
function outShow(){
    document.getElementById("pic").style.background = "url('images/0002.jpg')";
}
</script>
<div class="ClassificationPanel">
            <a id="pic" class="ClassificationIcon Icon1">家具风格</a>
            <span class="ClassificationLink">
             
                <a href="javascript:void(0)" onmouseover="overShow('images/0004.jpg')" onmouseout="outShow()">欧式古典</a>
                <a href="javascript:void(0)" onmouseover="overShow('images/0004.jpg')" onmouseout="outShow()">欧式田园</a>
                <a href="javascript:void(0)" onmouseover="overShow('images/0004.jpg')" onmouseout="outShow()">美式古典</a><br />
                <a href="javascript:void(0)" onmouseover="overShow('images/0004.jpg')" onmouseout="outShow()">美式田园</a>
                <a href="javascript:void(0)" onmouseover="overShow('images/0004.jpg')" onmouseout="outShow()">韩式田园</a>
                <a href="javascript:void(0)" onmouseover="overShow('images/0004.jpg')" onmouseout="outShow()">韩式古典</a><br />
                <a href="javascript:void(0)" onmouseover="overShow('images/0004.jpg')" onmouseout="outShow()">更多..</a>
            </span>
        </div>
.ClassificationPanel:hover .Icon1
{
    background-position:-88px 0px;
}
谢谢大家!和同事探讨了一下,上面的代码正是我要的结果!