Question

图片单独显示上面一半鼠标一移上去就显示下面一半 用CSS代码

Answer 1

<style>

.hellow{ background:url(bg.jpg) no-repeat left top; height:20px; width:100px; text-align:center; color:#fff; font-size:14px; line-height:20px; cursor:pointer}

.hellow:hover{ background:url(bg.jpg) no-repeat left bottom;}

</style>

<div class="hellow">你好</div>

图片保存为bg.jpg

然后给div定义为hellow 

鼠标放上去的样式为:hover 设置背景图片 不重复 左  底

追问

在IE上面没有用，谷歌有用，我还要考虑到兼容性！那怎么弄！

追答

因为直接给这个div加的hover ie不支持 如果给这个文字加上链接就支持了 你再试下
因为图片是纯色的 所以我直接把纯色改成背景颜色了.

a{ text-decoration:none;}
.hellow a{ background: #F60;height:20px; width:100px; text-align:center; color:#fff; font-size:14px; line-height:20px; cursor:pointer; display:block;}
.hellow a:hover{ background:#90F;height:20px; width:100px; text-align:center; color:#fff; font-size:14px; line-height:20px; cursor:pointer; display:block;}

你好
你看下这个效果不明白的再联系我

追问

图片不是纯色的如果是这样的话我的IE9是支持的，文字是在图片本身上面的并不是我在后面打上去的，作为背景图片，图片本身大小是height:58px; width:87px;但我需要的只是一张图片作为背景，一开始鼠标移上去会变成下半部分图片。

追答

下班回家了 所以没及时回复
如果两个图片是一个上一个下的话 这是一张图片 那么必须做成背景 不能做成图片.
如果是两张图片的话可以做成图片的
一张大图的话这样写代码
.hellow a{ background: url(图片地址.jpg) no-repeat left top #999;height:29px; width:87px; text-align:center; color:#fff; font-size:14px; line-height:20px; cursor:pointer; display:block;}
.hellow a:hover{ background: url(图片地址.jpg) no-repeat left bottom #960;}

Answer 2

#button {
    display:block;
    width:112px;
    height:36px;
    background:url(notitle.png) 0 0 no-repeat;
}
#button:hover {
    background:url(notitle.png) 50% 100% no-repeat;
}

 

追问

在IE上面没有用，谷歌有用，我还要考虑到兼容性！那怎么弄！

追答

        <style>
            ul li {
                margin:0;
                padding:0;
                list-style:none;
            }
        
            .button {
                background:url(notitle.png) no-repeat;
                background-position:0 0;
            }
            
            .button a {
                display:block;
                width:112px;
                height:36px;
                line-height:36px;
                text-align:center;
                color:#f1f1f1;
                text-decoration:none;
            }                
            
            .button a:hover {
                background:transparent url(notitle.png) 0 100% no-repeat;
                color:#424242;
            }
        </style>

        <ul>
            <li class="button"><a href="#">Just a Test</a></li>
        </ul>

 这样写测试过了，在IE6下都没问题。