搞后台弹出层,用jquery,实现的效果,发现 一个好玩的东西:
<script language="javascript">
var x = 10;
var y = 20;
$(function (){
$(".divpop").mouseover(function(e){
var keywords=$(this).attr('foc');
$(this).parent().css('background','#94D0EE');
var tooltip="<div id='tooltip'>关键字:"+keywords+"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标,并且显示
}).mouseout(function(){
$(this).parent().css('background','#fff');
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
$(".divpop").siblings("td").mouseover(function(){
$(this).parent().css('background','#94D0EE');
}).mouseout(function(){
$(this).parent().css('background','#fff');
})
});
</script>
$(".divpop").siblings("td").mouseover(function(){
$(this).parent().css('background','#94D0EE');
}).mouseout(function(){
$(this).parent().css('background','#fff');
})
$(this)代表鼠标移上去或者移出去的那个td,可以得出结论,可以通过元素事件,就不用直接遍历元素了
本来也可以这样:
$(".divpop").siblings("td").each(function(){
$(this).mouseover(function(){$(this).parent().css('background','#94D0EE')}).mouseout(function(){
$(this).parent().css('background','#fff');
})
})
效果如下: