情况一:也是最好的,不占空间的。
<a href="#" title="Zabbix"> <i class="icon-uniE6AB font-fouri"></i></a>
说明:对图片字体添加鼠标提示,a标签的title就可以实现,href为空连接。
情况二:通过两个函数显示οnmοuseοver="showBlock('<%=i%>S')" 鼠标滑过操作,οnmοuseοut="showNone('<%=i%>S')"鼠标离开操作,这个占有页面的空间,显示时页面布局可能有变化。
jsp代码:
<%int i = 0; %>
<c:forEach items="${hostList}" var="hostList">
<tr class="gradeX">
<td id="navigation" style="width: 157px;"><a href="/itm/host/${hostList.name }" target="_blank">${hostList.host }</a></td>
<td>${hostList.inventory.software_app_e==null?' ':hostList.inventory.software_app_e }</td>
<td>${hostList.inventory.serialno_a==null?' ':hostList.inventory.serialno_b }</td>
<td>${hostList.inventory.url_a==null?' ':hostList.inventory.url_a }</td>
<td>${hostList.inventory.poc_2_screen==null?' ':hostList.inventory.poc_2_screen }</td>
<td id="navigation">${hostList.inventory.site_notes }</td>
<td>${hostList.inventory.site_rack }</td>
<td class="center hidden-phone">${hostList.inventory.site_country }</td>
<td class="center hidden-phone">${hostList.inventory.poc_2_phone_a }</td>
<td style="text-align: center;">
<c:choose>
<c:when test="${hostList.status =='1'}">
<span class="badge bg-important"> </span>
</c:when>
<c:otherwise>
<span class="badge bg-success"> </span>
</c:otherwise>
</c:choose>
</td>
<td style="text-align: center; width:102px;">
<div class="f1">
<div id="<%=i%>available" class="font-fourdiv" οnmοuseοver="showBlock('<%=i%>Z')" οnmοuseοut="showNone('<%=i%>Z')">
<a href="#" title="Zabbix"> <i class="icon-uniE6AB font-fouri"></i></a>
</div>
<div id="<%=i%>snmp_available" class="font-fourdiv" οnmοuseοver="showBlock('<%=i%>S')" οnmοuseοut="showNone('<%=i%>S')">
<a href="#" title="SNMP"><i class="icon-uniE6A6 font-fouri"></i></a>
</div>
<div id="<%=i%>jmx_available" class="font-fourdiv" οnmοuseοver="showBlock('<%=i%>J')" οnmοuseοut="showNone('<%=i%>J')">
<a href="#" title="JMX"><i class="icon-uniE69B font-fouri"></i></a>
</div>
<div id="<%=i%>ipmi_available" class="font-fourdiv" οnmοuseοver="showBlock('<%=i%>I')" οnmοuseοut="showNone('<%=i%>I')">
<a href="#" title="IPMI"><i class="icon-uniE69A font-fouri"></i></a>
</div>
</div>
<div id="<%=i%>xuanfu" style="display: none;font-weight: bold; "></div>//鼠标滑过显示div中的值,离开div隐藏。
</td>
<%i++; %>
</tr>
</c:forEach>
js代码:
<script type="text/javascript">
/* function showBlock(e){
var leng = e.length;
var zabbix = e.substring(leng,leng-1);//取到参数的那个标志Z、J、S或是I
var num = e.substring(leng-1,0);//取到数字i方便以后去悬浮的id
var xuanfu = $("#"+num+"xuanfu");
if(zabbix=='Z'){
xuanfu.html("Zabbix");
} else if(zabbix=='S'){
xuanfu.html("SNMP");
} else if(zabbix=='J'){
xuanfu.html("JMX");
} else{
xuanfu.html("IPMI");
}
xuanfu.show();
} */
/* function showNone(e){
var leng = e.length;
var zabbix = e.substring(leng,leng-1);//取到参数的那个标志Z、J、S或是I
var num = e.substring(leng-1,0);//取到数字i方便以后去悬浮的id
var xuanfu = $("#"+num+"xuanfu");
xuanfu.hide();
} */
</script>