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

2012-05-28

[问]鼠标经过,怎么改变另外一个地方的背景图片默认状态:鼠标指上去后:HTML:HTML codediv classClassifi

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

鼠标指上去后:

HTML:

HTML code

        <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:

CSS code

.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下没反应

[解决办法]

HTML code

<!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：移上去的图片
} 
 
[解决办法]
随便用几张图片测试：
HTML code<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>的背景图,应该怎么做.

热点排行

JavaScript

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