技术 javascript
Jquery实现移动鼠标显示指定信息

Jquery实现移动鼠标显示指定信息

学习javascript的一个练习,刚巧有这个需求。常见的域名解析的页面就是如此。

代码如下

    <script src="jquery.js></script>
    <table>
    <tbody>
    <tr>
   <td align="center" valign="middle"><input type="checkbox" /></td>
   <td align="center" valign="middle" id="hostname"><input type="text" class="jx_zjjl" title="主机记录"/></td>
   <td align="center" valign="middle" id="hosttype"><select name="select" class="jx_jllx" title="记录类型">

   <tr class="jx_contenttr" style="display:none" id="hostnamed">
      ` <td colspan="8" align="left" valign="middle">`
   <p class="jx_content"><b>主机记录就是域名前缀,常见用法有:</b><br />
 <strong>www</strong>:解析后的域名为 www.03099.com<br />
 <strong>@</strong>:空主机头,直接解析主域名03099.com<br />
 <strong>*</strong>:泛解析,匹配其他所有域名 *.03099.com<br />
 只有A记录可以设置轮询,即可以添加多个同主机头同线路但不同记录值的解析记录。<br />
 除空主机头和泛解析外,主机头的构成只允许"0-9/a-z/-",即数字字母中划线这3种,但不能以"-"开头或结尾。<br />
 主机头的字母必须为小写,如果用户填了大写字母会自动转换为小写。<br />
 主机记录不需要包括域名本身。例如域名是03099.com,主机头填写"www"即可,填写成"www.03099.com"是错误的。</p>
 </td>
 </tr>


 <tr class="jx_contenttr"  style="display:none" id="hosttyped">
   <td colspan="8" align="left" valign="middle">
 <p class="jx_content"><strong>要指向空间商提供的 IP 地址,选择"A记录",要指向一个域名,选择"CNAME记录"</strong><br />
   <strong>A</strong>:地址记录,用来指定域名的IPv4地址(如:8.8.8.8),如果需要将域名指向一个IP地址,就需要添加A记录。<br />
   <strong>CNAME</strong>: 如果需要将域名指向另一个域名,再由另一个域名提供ip地址,就需要添加CNAME记录。<br />
   <strong>MX</strong>:如果需要设置邮箱,让邮箱能收到邮件,就需要添加MX记录。<br />
   <strong>URL隐藏</strong>:隐藏转发,需要审核。从一个地址301重定向到另一个地址的时候,就需要添加URL记录。<br />
   <strong>URL非隐藏</strong>:非隐藏转发,需要审核,从一个地址301重定向到另一个地址的时候,就需要添加URL记录。<br />
   <strong>NS</strong>:域名服务器记录,如果需要把子域名交给其他DNS服务商解析,就需要添加NS记录。<br />
   <strong>TXT</strong>:在这里可以填写任何东西,长度限制200。绝大多数的TXT记录是用来做SPF记录(反垃圾邮件)。<br />
   <strong>AAAA</strong>:用来指定主机名(或域名)对应的IPv6地址(例如:ff06:0:0:0:0:0:0:c3)记录。 </p>
   </td>
   </tr>

    </tbody>
</table>
<script type="text/javascript">
var idArray = new Array() 
idArray = ['hostname','hosttype']; //

function tabStatus(tab,status){ 
  $('#'+tab).attr('style','display:'+status);
}
function mouseStatus(tab){


  $('#'+tab).mouseover(function(){ 
for(var i=0; i<idArray.length; i++)
    {
      //console.log(idArray[i]);
      tabStatus(idArray[i]+'d','none');
    }
    tabStatus(tab+'d','true')});
    }
    for(var i=0; i<idArray.length; i++){
      mouseStatus(idArray[i]);
    }
    </script>

如上即可以实现移动鼠标到某处就可以显示相应的内容

"文章为作者独立观点, 不代表老订阅立场"

本站作者

每日荐书

在不完美的世界力求正常——读《公司的坏话》

书名:《公司的坏话》

作者:李天田(脱不花妹妹)

出版社:北京大学出版社

赞助商

广告