当前位置：首页 → 问答吧 → 这个表单效果怎么做？

这个表单效果怎么做？

时间：2010-05-17

来源：互联网

就是鼠标移到表单，显示内容列表做选择

有没有现成的代码可以下载？谢谢！

像这样：http://www.u88.cn/wyp/lmxbql.htm

作者: yy02 发布时间: 2010-05-17

如果不考虑IE7以下的IE的话，可以用CSS来直接控制：

复制内容到剪贴板

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style>
    .notice div{
        display:none;
    }
    tr:hover .notice div{
        display:block;
    }
</style>
<table>
<tr>
  <td>留言：</td>
  <td><textarea></textarea></td>
  <td class="notice"><div>这是提示的内容</div> </td>
</tr>
</table>
</body>
</html>

作者: QQ379699897 发布时间: 2010-05-17

如果用js的话可以这样

复制内容到剪贴板

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
  <td>留言：</td>
  <td class="txt"><textarea></textarea></td>
  <td><div class="notice" style=" display:none;">这是提示的内容</div> </td>
</tr>
</table>
<script language="javascript">
$('tr').hover(function(){
    $('.notice').show();
}, function(){
    $('.notice').hide();
});
</script>
</body>
</html>

作者: QQ379699897 发布时间: 2010-05-17

引用:

原帖由 QQ379699897 于 2010-5-17 13:09 发表
如果用js的话可以这样

无标题文档

  留言：

  这是提示的内容 

$('tr').hover(function(){
$('.notice').show();
}, function(){
$('.notice').hide();
});

提示功能有了，那如何一点那提示的内容，内容就直接复制到表单上？

作者: yy02 发布时间: 2010-05-19