jquery鼠标移上div切换
2016-07-13 11:50
513 查看
样式:
.tb_box{ padding:20px; position: absolute; left:0; right:0; width: 50%;margin:auto; background:#eee;}
.tb_box span{display:block; padding:20px; width:120px; margin:0 auto; text-align:center; border:solid 1px #ddd; }
.tb_box span.t2{border:solid 1px #F1080C;}
页面结构:
<div class="tb_box">
<span class="t1">
产品详细
</span>
<span class="t2">
<a href="#">确认</a>
</span>
</div>
js代码:
var is_block=false;
var t2=$(".tb_box span.t2").hide();
$(".tb_box span.t1").mouseover(function(){
$(this).hide();
t2.show();
});
t2.mouseover(function(){
is_block=true;
$(this).show();
$(".tb_box span.t1").hide();
});
t2.mouseout(function(){
if(is_block){
$(this).hide();
$(".tb_box span.t1").show();
is_block=false;
}
});
.tb_box{ padding:20px; position: absolute; left:0; right:0; width: 50%;margin:auto; background:#eee;}
.tb_box span{display:block; padding:20px; width:120px; margin:0 auto; text-align:center; border:solid 1px #ddd; }
.tb_box span.t2{border:solid 1px #F1080C;}
页面结构:
<div class="tb_box">
<span class="t1">
产品详细
</span>
<span class="t2">
<a href="#">确认</a>
</span>
</div>
js代码:
var is_block=false;
var t2=$(".tb_box span.t2").hide();
$(".tb_box span.t1").mouseover(function(){
$(this).hide();
t2.show();
});
t2.mouseover(function(){
is_block=true;
$(this).show();
$(".tb_box span.t1").hide();
});
t2.mouseout(function(){
if(is_block){
$(this).hide();
$(".tb_box span.t1").show();
is_block=false;
}
});
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- Web布局连载——两栏固定布局(五)
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- [div+css]晒晒最新制作专题推广页模板