求html代码,点击按钮弹出层,再次点击关闭层?

点击按钮弹出层,再次点击关闭层,按钮默认图片1.jpg,鼠标放上后加载2.jpg,弹出层时加载2.jpg,求代码!... 点击按钮弹出层,再次点击关闭层,按钮默认图片1.jpg,鼠标放上后加载2.jpg,弹出层时加载2.jpg,求代码! 展开
 我来答
ml4w5
2015-08-11 · TA获得超过1394个赞
知道小有建树答主
回答量:625
采纳率:25%
帮助的人:641万
展开全部

首先你要写好两条CSS,用以切换控制按钮样式(以下代码中省略宽高等声明):

.button {background:url(images/1.jpg) center no-repeat;} /* 默认样式 */
.button-hover {background-image:url(images/2.jpg);} /* 鼠标悬停及弹出层时样式 */

然后用JS来控制属性:

var oBtn = document.getElementById('btn'); // 假设按钮的id为btn
var oDiv = document.getElementById('div'); // 假设弹出层的id为div
// 鼠标悬停
oBtn.onmouseover = function() {
    oBtn.className = 'button button-hover'; 
}
// 鼠标移出
oBtn.onmouseout = function() {
    oBtn.className = 'button'; 
}
// 点击按钮
oBtn.onclick = function() {
    if (oDiv.style.display == 'none') { // 如果层是隐藏的
        oDiv.style.display = 'block';
        oBtn.className = 'button button-hover';
    } else { // 如果层是显示的
        oDiv.style.display = 'none';
        oBtn.className = 'button';
    }
}

用jQuery的话代码如下:

var oBtn = $('#btn');
var oDiv = $('#div');
oBtn.hover(function() {
        $(this).addClass('button-hover');
    }, function(){
        $(this).removeClass('button-hover');
}).click(function() {
    if (oDiv.is(':hidden')) {
        oDiv.show();
        $(this).addClass('button-hover');
    } else {
        oDiv.hide();
        $(this).removeClass('button-hover');
    }
});
Zaxlct
2015-08-11 · 超过21用户采纳过TA的回答
知道答主
回答量:82
采纳率:0%
帮助的人:29.9万
展开全部
需要用JS写
追问
有具体的代码吗??
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式