[问]鼠标经过,如何改变另外一个地方的背景图片-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20474 次

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

鼠标指上去后:

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>