要求:
如下图,有内容的每一行,当鼠标放上去显示灰色区域,当鼠标离开灰色区域消失
说明:
循环实现行显示，循环体是一个div，里面放两个div，用js实现效果，获取到该元素，一上来每一行中的灰色区域设置隐藏，添加事件 $(".xs").mouseover(function(){ $(this).children("div").css("display","block"); }) ；
代码:
后台
<?php include("../init.inc.php"); include("../DBDA.php"); $attr = array( "淄博汉企优质会员企业与实训结业人员项目交流会希望所有实训人员做好准备，为双方递交一份满意的答卷", "回答是否该奥会计法安徽打过架哦按时打算答复股群殴我去付钱方法好卡发卡挂靠费啊发送咖啡馆秋风", "回答是否该奥会计法安徽打过架哦按时打算答复股群殴我去付钱方法好卡发卡挂靠费啊发送咖啡馆秋风" ); $smarty->assign("shuzu",$attr); $smarty->display("test1.html");
前台显示:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../../config/jquery-1.11.2.min.js"></script> <title>无标题文档</title> <script type="text/javascript"> $(document).ready(function(e) { $(".xs").mouseover(function(){ $(this).children("div").css("display","block"); }) $(".xs").mouseout(function(){ $(this).children("div").css("display","none"); }) }); </script> </head> <body> <{foreach $shuzu as $v}> <div class='xs' style='500px; height:30px'> <span><{$v|substr:30:"..."}></span> <div style='300px; height:100px; margin:0px 0px 0px 300px; background-color:#CCC; display:none'><{$v}></div> </div> <{/foreach}> </body> </html>