css - 關于table tr的樣式問題 hover怎么變得是隔行才有反應
問題描述
以下是jsp頁面的整個代碼：
<%@ page language='java' pageEncoding='utf-8'%><%@page import='java.util.Date'%><%@ taglib uri='http://java.sun.com/jstl/core_rt' prefix='c'%><%@ taglib uri='http://java.sun.com/jsp/jstl/fmt' prefix='fmt'%><%@ taglib prefix='fn' uri='http://java.sun.com/jsp/jstl/functions'%><!doctype html><html lang='en'><jsp:include page='../../views/include/includeHead.jsp'> <jsp:param name='title' value='' /></jsp:include><!-- 區域控件css --><link rel='stylesheet' href='http://www.gepszalag.com/resource/func/js/testArea/css/city-picker.css'><link rel='stylesheet' href='http://www.gepszalag.com/resource/func/js/testArea/css/industry-picker-fx.css'><link rel='stylesheet' href='http://www.gepszalag.com/resource/func/js/testArea/css/industry-picker.css'><link rel='stylesheet' href='http://www.gepszalag.com/resource/func/js/testArea/css/zTreeStyle/zTreeStyle.css' type='text/css'><style>.time:hover { cursor: pointer;}.money:hover { cursor: pointer;}.browser:hover { cursor: pointer;}.title { width: 240px; height: 30px; display: block; overflow: hidden;}.positive { float: left; padding: 10px 10px 10px 10px; color: #999999;}.search { position: relative; width: 827px; border: 1px solid #1790CF; background: #fff; margin-top: 25px; margin-left: 8px;}.search>span { color: #c6c6c6; font-size: 18px; position: absolute; left: 2%; top: 9px;}.search>input { padding-left: 45px; width: 827px; height: 35px; font-size: 15px; outline: none; border: none;}.search>button { position: absolute; top: -1px; left: 825px; width: 100px; height: 37px; border: 1px solid #1790CF; background: #1790CF; color: #fff;}.disp:hover { background: rgba(162, 212, 230, 0.41);}/* 開始比較按鈕 */#startComp { width: 60px; height: 50px; font-size: 12px; /* background: -ms-linear-gradient(top, #ffd878, #ffb12e); /* IE 10 */ /* background: -moz-linear-gradient(top, #ffd878, #ffb12e); /*火狐*/ /* background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffd878), */ /* to(#ffb12e) ); /*谷歌*/ /* background-color: #FEC25B; */ color: #ffffff; cursor: pointer; position: fixed; bottom: 18%; text-align: center; /* z-index: 999; */ right: 0%;}.figure { float: left; display: block; margin-right: 2px; width: 23px; height: 34px; font: bold 30px/34px ’Microsoft Yahei’, arial; border-radius: 5px; text-align: center; color: #1790CF; background-color: #fff;}#mapStatistics { width: 970px; background: url('/resource/func/images/total/statistics.png');}.proTitle { width: 180px; height: 50px; margin-top: 15px; text-align: center; line-height: 50px; color: #fff; font-size: 16px; border-radius: 8px; cursor: pointer; box-shadow: 3.429px 2.06px 3.84px 0.16px rgba(0, 0, 0, 0.2);}.proTitle:hover { box-shadow: 8px 5px 4px 1px rgba(0, 0, 0, 0.3);}.libraryBtn { width: 100px; height: 30px; line-height: 30px; color: #fff; margin: 0 10px;}.sort { height: 30px; line-height: 30px; width: 135px; text-align: center; color: #ffaf2c;}.active { background-color: #FFB02C; color: #fff;}.positive { background-color: #ffb02c;}.tabTitle { height: 30px; text-align: center; color: #fff; margin: 0 2px;}.num { width: 40px; height: 30px; background-color: #ff6600; border-top-right-radius: 10px; text-align: center; line-height: 30px; color: #FFF; padding: 0}.viewDetailButton { margin-left: 3px; width: 70px; height: 24px; line-height: 24px; font-size: 12px; background-color: #FEC25B; color: #ffffff; cursor: pointer; margin-top: -22px;}/* 取消關注按鈕 */.unfocusButton { width: 30px; height: 23px; line-height: 23px; font-size: 12px; color: #b6c4cb; margin-top: 5px; /* border: 1px solid #e1e5e8; */ cursor: pointer; margin-left: 3px;}/* 對比按鈕 */.compareButton { width: 30px; height: 23px; line-height: 23px; font-size: 12px; cursor: pointer; margin-top: 2px; /* border: 1px solid #b5c0c9; */ margin-left: 3px; float: left;}.favrButton { /* border: 1px solid #067ED7; */ width: 30px; height: 21px; margin-left: 50px; margin-top: 2px; cursor: pointer; color: #067ED7; background: url(’../../../resource/images/proLibrary/library/fav.png’) no-repeat 0px center; float: left;}.favrCancelButton { /* border: 1px solid #067ED7; */ width: 30px; height: 21px; margin-left: 50px; margin-top: 2px; cursor: pointer; color: #067ED7; background: url(’../../../resource/images/proLibrary/library/fav2.png’) no-repeat 0px center;}.td3 { BORDER-RIGHT: #fff 1px solid; BORDER-BOTTOM: #FFF 1px solid;}.bootstrap-select .btn { height: 30px;}/* 數據超長省略號顯示 */.tooLength { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -moz-text-overflow: ellipsis; white-space: nowrap;}/* #showProNameTable>table>tbody>tr:nth-of-type(odd) { border:1px dashed #aaa;} */table>tbody>tr:nth-of-type(odd) { background-color: #f5f5f5;}.table>tbody>tr>td{ border: 0px solid #ddd;}.table>tbody>tr:hover { background-color: #d1e8ef; cursor: pointer;}table>tbody>tr:nth-of-type(odd):hover { background-color: #d1e8ef; cursor: pointer;}.lockpng{ background: url(/resource/images/lgip/lock2.png) no-repeat; width: 23px; height: 43px; position: relative; left: 70px; top: -7px;} </style><body class='bodyCss'> <p style='padding-top: 0px;'><form action='/lgip/all/map/index'method='post'> <jsp:include page='../../views/include/includeNavHeader.jsp'><jsp:param name='nav' value='SY' /> </jsp:include> <p class='container minBg'><p class='col-xs-2'> <p id='menuNav'><jsp:include page='../../views/include/includeMenu.jsp'> <jsp:param name='nav' value='PROVIEW' /></jsp:include> </p></p><input type='hidden' name='selectpage' value='${selectpage}'> <input type='hidden' value='${selectedIds }' name='selectedIds' /><p class='container minBg'> <input type='hidden' name='section' /> <inputtype='hidden' name='selected' value='${selected}' /> <p style='position: relative; padding: 0px; margin-left: 170px; background: #fff; margin-bottom: 20px; margin-top: -1px;'><p style='padding: 0; height: 80px; width: 100%; background-color: #f2f2f2'> <p onclick='library(1);' id='prolib'><p style='margin-left: 50px'>項目庫</p> </p> <p onclick='distribute(2);' id='prodis'><p style='margin-left: 50px; color: #2B98ED;'>項目分布</p> </p> <p onclick='statistics(3);' id='prosta'><p style='margin-left: 50px; color: #2B98ED;'>統計信息</p> </p></p><!-- 項目分布 --><p style='display: none;'> <p style='padding: 0; width: 100%; height: 30px; color: #fff; background: url(’../../../resource/images/proLibrary/map/mapnav.png’) no-repeat 10px center, url(’../../../resource/images/proLibrary/banner.png’) no-repeat 0 center; background-color: #d1e8ef; line-height: 30px; margin-top: 1px'><p style='margin-left: 40px'>項目分布</p> </p> <p style='height: 600px; width: 780px; float: left; margin-top: 20px'></p> <p style='padding: 0; background-color: #52aed8; width: 100%; height: 100px; margin-top: 20px'><p style='width: 260px; padding: 0; margin-left: 160px;'> <img class=’col-xs-4’ src='http://www.gepszalag.com/resource/images/proLibrary/map/mapbottom1.png'> <p style='color: #fff; font-size: 18px; margin-top: 25px; padding: 0; margin-left: 10px'><p>掛牌項目</p><p>${sumnum}個</p> </p></p><p class='col-xs-2'> <imgsrc='http://www.gepszalag.com/resource/images/proLibrary/map/mapbottom2.png'></p><p style='width: 260px; padding: 0;'> <img src='http://www.gepszalag.com/resource/images/proLibrary/map/mapbottom3.png'> <p style='color: #fff; font-size: 18px; margin-top: 25px; padding: 0; margin-left: 10px'><p>掛牌總金額</p><p>${sumje/10000}億</p> </p></p> </p></p><!-- 項目庫 --><p id='library'> <c:if test='${role == ’3’}'><p onclick='startCompare();'> <img alt=''src='http://www.gepszalag.com/resource/images/proLibrary/library/compare.png'> <p style='display: none; line-height: 50px;'>開始比較</p> <c:if test='${not empty selected }'>(${selected})</c:if></p><p style='display: none; position: fixed; right: 60px; top: 76.7%; border: 1px solid #78b9d9; font-size: 12px; background-color: #fff;z-index: 99;'> <p style='padding: 0; position: relative;'><p id='proNameLeft'> <tablestyle='margin-bottom: 0; padding: 0; min-width: 205px; min-height: 35px;'><input type='hidden' name='compareListSize' value='${fn:length(compareList)}'><c:forEach items='${compareList}' var='cl'><tr><td>${cl.proName}</td><td onclick='cancelCompare2(this);'>×</td></tr></c:forEach> </table> <p onclick='clearProName();'>清空</p></p><p onclick='proNamePrev()'>＜</p><ponclick='proNameNext()' style='padding: 0; cursor: pointer; width: 20px; height: 20px; position: absolute; left: 92%; top: 42%'>＞</p> </p></p></c:if> <p style='padding: 0; width: 100%; height: 30px; color: #fff; background: url(’../../../resource/images/proLibrary/library/libnav.png’) no-repeat 10px center, url(’../../../resource/images/proLibrary/banner.png’) no-repeat 0 center; background-color: #d1e8ef; line-height: 30px; margin-top: 1px'><p style='margin-left: 40px'>項目庫</p> </p> <p style='padding: 0; border: 1px solid #fff; min-height: 700px;'><p style='padding: 0'> <p style='padding: 0; margin-top: 20px; height: 30px'><p style='padding: 0; width: 310px; margin-left: 70px'> <p align='right'>區域</p> <p style='padding: 0; margin-left: 80px; margin-top: -32px;'><p style='padding: 0'><p class='form-group'> <p style='position: relative;'><inputreadonly='readonly' type='text' value='${section}' data-toggle='city-picker'> </p></p></p> </p></p><p style='padding: 0; width: 350px; margin-left: 50px'> <p style='margin-bottom: 10px; padding: 0px;'><p for='tzjg' style='padding-right: 0px; padding-left: 0px; width: 56px; line-height: 30px; height: 30px'>行業類別</p><p style='width: 280px; height: 30px; margin-left: 10px'><p class='form-group'> <p style='position: relative;'><p style='left: 257px;'></p><input readonly='readonly' type='text' name='business_picker' placeholder='請選擇'> <input type='hidden' name='category' value='${category}'><p style='display: none;'> <p class=’col-xs-12’style='overflow: auto; height: 410px;'><ul class='ztree treeDemo'></ul><button type='button' onclick='getIndustrycheck(this);' style='width: 95px; height: 30px; line-height: 30px; padding: 0px; margin-left: 30px;'>確認</button><!-- <button type='button' isAll=’no’ onclick='selectAllIndustry(this);' >全選</button> --> </p></p> </p></p></p> </p></p> </p> <p style='padding: 0; margin-top: 20px;'><p style='padding: 0; width: 310px; margin-left: 70px'> <p style='padding: 0; width: 56px; line-height: 30px; height: 30px'>發布時間</p> <p style='margin-left: 48px; margin-top: -30px;'><p style='padding-left: 2px;'><p style='left: 95px;'></p><input type='text' id=’startTime’ name=’startTime’ datepicker placeholder=' 全部' readonly='readonly' value='${stime}'></p><p style='width: 5px; height: 30px; line-height: 30px; margin-left: 5px;'></p><p style='position: absolute; top: 4px; left: 144px;'>一</p><p class='col-xs-5 '><p style='left: 105px;'></p><input type='text' id=’endTime’ name=’endTime’ datepicker placeholder=' 全部' readonly='readonly' value='${etime}'></p> </p></p><p style='padding: 0; width: 310px; margin-left: 50px'> <palign='right'>合作方式</p> <p style='padding: 0; margin-left: 66px; margin-top: -22px;'><select name='hzfsSel' data-width='280px'><option value=''>請選擇</option><c:forEach items='${hzfs}' var='op'> <option value='${op.value }'<c:if test='${hzfsSel == op.value}'>selected='selected'</c:if>>${op.desc}</option></c:forEach></select> </p></p> </p> <p style='padding: 0; margin-top: 20px;'><p style='padding: 0; width: 310px; margin-left: 70px'> <p style='padding: 0; width: 56px; line-height: 30px; height: 30px'>投資規模</p> <p style='margin-left: 48px; margin-top: -30px;'><p style='padding-left: 2px;'><input type='hidden' name='minAmt' value='${minAmt}'> <input type='hidden' name='maxAmt' value='${maxAmt}'> <input type='text' id=’showMinAmt’ name=’showMinAmt’ placeholder='' maxlength='9' onblur='changeAmtBlur(’min’);' onfocus='changeAmtFocus(’min’);' style='width: 125px; padding-left: 10px;'></p><p style='width: 5px; height: 30px; line-height: 30px; margin-left: 5px;'></p><p style='position: absolute; top: 4px; left: 144px;'>一</p><p class='col-xs-5 '><input type='text' id=’showMaxAmt’ name=’showMaxAmt’ placeholder='' maxlength='9' onblur='changeAmtBlur(’max’);' onfocus='changeAmtFocus(’max’);' value='' style='width: 128px; padding-left: 10px;'></p> </p></p><p style='padding: 0; width: 310px; margin-left: 50px'> <palign='right'>關鍵字</p> <p style='padding: 0; margin-left: 66px; margin-top: -22px;'><input type='text' id=’keyWords’ name=’keyWords’ placeholder='區域、編號、名稱等關鍵字' value='${keyWords }'style='width: 280px;'> </p></p> </p> <p style='padding: 0; width: 260px; float: right; margin-top: 10px;'><p onclick='queryProInfo();'> <p style='margin-left: 30px;'>搜索</p></p><p onclick='resetQuery();'> <p style='margin-left: 35px;'>重置</p></p> </p></p><p style='position: absolute; height: 60px; top: 190px; z-index: 9px;'></p><p style='padding: 0; margin-top: 20px; z-index: 99px;'> <p style='padding: 0;'><p style='padding: 0; margin-left: 20px; top: 6px;'> <input type='hidden' name='sort' value='${sort}'> <p style='padding: 0; left: 3px;'><p style='position: absolute; border-radius: 50% 0 0 50%; width: 15px; height: 30px; border: 1px solid #ffaf2c; border-right: none; background: #fff;'></p><p style='padding: 0; border: 1px solid #ffaf2c; margin-left: 30px; border-left: none; background: #fff;'><p updown='up' onclick='ordered(this)'>截止時間</p></p> </p> <!-- <p style='padding: 0; background-color: #fff;'><p updown='up' onclick='ordered(this)'>金額</p> </p> --> <p style='padding: 0; margin-left: 1px;'><p style='padding: 0; border: 1px solid #ffaf2c; border-right: none; color: #ffaf2c; height: 30px; line-height: 30px; background: #fff;'><p updown='up' onclick='ordered(this)'>瀏覽量</p></p><p style='padding: 0; width: 30px; height: 30px; le; border-radius: 0 50% 50% 0;; border: 1px solid #ffaf2c; border-left: none; background: #fff;'></p> </p></p> </p> <table style='padding: 0; margin-top: 20px;'><tr> <td style='background: url(’../../../resource/images/proLibrary/library/baseinfor.png’) no-repeat 35px center; background-color: #408dd3; width: 181px; border-right: 1px solid #fff;'><pstyle='margin-left: 20px'>項目編號</p></td> <td style='background: url(’../../../resource/images/proLibrary/library/proName.png’) no-repeat 85px center; background-color: #408dd3; width: 266px; border-right: 1px solid #fff'><pstyle='margin-left: 20px'>項目名稱</p></td> <td style='background: url(’../../../resource/images/proLibrary/library/industry.png’) no-repeat 15px center; background-color: #408dd3; width: 120px; border-right: 1px solid #fff'><pstyle='margin-left: 25px'>所屬行業</p></td> <td style='background: url(’../../../resource/images/proLibrary/library/area.png’) no-repeat 30px center; background-color: #408dd3; width: 160px; border-right: 1px solid #fff'><pstyle='margin-left: 23px'>所在區域</p></td> <td style='background-color: #408dd3; width: 100px;background:<c:if test='${role==3}'>url(’../../../resource/images/proLibrary/library/operate.png’) no-repeat 3px center</c:if><c:if test='${role==2}'>url(’../../../resource/images/proLibrary/library/invest2.png’) no-repeat 3px center</c:if>; background-color: #408dd3;'><pstyle='margin-left: 0px'><c:if test='${role==3}'>操作</c:if><c:if test='${role==2}'> 投資規模</c:if></p></td></tr> </table> <p style='padding-left: 0px; padding-right: 0px;'><table class='col-xs-12 none-padding table-striped'> <tbody><tr style='height: 0px;'></tr><c:choose><c:when test='${not empty pagelist}'> <c:forEach items='${pagelist}' var='item'varStatus='liInd'><tr> <td><p class='oldbackColor'> <table style='width: 100%; table-layout: fixed; margin-bottom: 0'><col /><col /><col /><col /><col /><tr style='height: 40px;<c:if test='${liInd.index%2==1}'> </c:if><c:if test='${liInd.index%2==0}'> background: #fff;</c:if>' <c:if test='${role == ’1’ || (role == ’2’ && item.procrtId == userId) || (role == ’3’ && !(item.lockFlag ))}'>onclick='window.location=’/lgip/all/details/allocated?menuIcon=A&id=${item.id}’' </c:if> <c:if test='${(role == ’3’ && (item.lockFlag ) && (item.lockUser == userId) )}'>onclick='window.location=’/lgip/all/details/allocated?menuIcon=A&id=${item.id}’' </c:if> <c:if test='${(role == ’3’ && (item.lockFlag ) && (item.lockUser != userId) )}'>onclick='showTip(’tz2’);' </c:if> <c:if test='${ (role == ’3’ && (item.lockFlag ) && (item.lockUser == userId) )}'>onclick='showTip(’tz2’);' </c:if> > <!-- 項目編號 --> <td style='padding: 0px;vertical-align: middle;'><p style='padding: 5px;'> <font style='color: #333333;'>${item.proNo}</font></p> </td> <!-- 項目名稱 --> <td style='vertical-align: middle;'<%-- <c:if test='${liInd.index%2==1}'> style='background: #fff;'</c:if><c:if test='${liInd.index%2==0}'> style='background: #fafafa;'</c:if> --%>><fontclass='important_font_color'>${item.proName}</font> </td> <!-- 行業 --> <td style='text-align: center;vertical-align: middle;padding:0px; <%-- <c:if test='${liInd.index%2==1}'> background: #fafafa;</c:if><c:if test='${liInd.index%2==0}'> background: #f2f2f2;</c:if> --%>'><fontclass='important_font_color'>${item.proType}</font> </td> <!-- 所在區域 --> <td style='text-align: center;word-break:break-all;vertical-align: middle;<%-- <c:if test='${liInd.index%2==0}'> background: #fafafa;</c:if><c:if test='${liInd.index%2==1}'> background: #fff;</c:if> --%>'><fontsize='2' style='color: #333333'>${item.proArea}</font> </td> <!-- 操作 --> <td<%-- <c:if test='${liInd.index%2==1}'> style='background: #fafafa;text-align: center;'</c:if><c:if test='${liInd.index%2==0}'> style='background: #f2f2f2;text-align: center;'</c:if> --%> style='vertical-align: middle;'> <c:if test='${role==3}'> <c:if test='${item.userId!=userId}'><p onclick='favoriteContrl(this)' id='${item.id}'></p> </c:if> <c:if test='${item.userId==userId}'><p onclick='favoriteContrl(this)' id='${item.id}'></p> </c:if></c:if> <c:if test='${role==3}'> <c:choose><c:when test='${role == ’1’ || (role == ’2’ && item.procrtId == userId) || (role == ’3’ && !(item.lockFlag )) }'> <%-- <ponclick='viewDetail(’${item.id}’)'>查看詳情</p> --%> <!-- 控制對比和取消對比按鈕 --> <c:choose><c:when test='${!(item.focusFlag) }'><ponclick='compare(this);' id='${item.id}'> <img alt='對比'src='http://www.gepszalag.com/resource/images/proLibrary/library/vs.png'style='margin-top: -2px;'> <font></font></p></c:when><c:otherwise><ponclick='cancelCompare(this);' id='${item.id}'> <img alt='對比'src='http://www.gepszalag.com/resource/images/proLibrary/library/vs2.png' style='margin-top: -2px;'> <font></font></p></c:otherwise> </c:choose></c:when><c:when test='${ (role == ’3’ && (item.lockFlag ) && (item.lockUser == userId) )}'> <!-- <ponclick='showTip(’tz1’);'>查看詳情</p> --> <ponclick='showTip(’tz1’);' id='${item.id}'><img alt='對比'src='http://www.gepszalag.com/resource/images/proLibrary/library/vs.png'style='margin-top: -2px;'> <font></font> </p> <p style='position:absolute;'><p class='lockpng'></p></p></c:when><c:when test='${ (role == ’3’ && (item.lockFlag ) && (item.lockUser != userId) )}'> <!-- <ponclick='showTip(’tz2’);'>查看詳情</p> --> <ponclick='showTip(’tz2’);' id='${item.id}'><img alt='對比'src='http://www.gepszalag.com/resource/images/proLibrary/library/vs.png'style='margin-top: -2px;'> <font></font> </p> <p style='position:absolute;'><p class='lockpng'></p></p></c:when><c:otherwise> <!-- <ponclick='showTip(’xm’);'>查看詳情</p> --> <ponclick='showTip(’xm’);' id='${item.id}'><img alt='對比'src='http://www.gepszalag.com/resource/images/proLibrary/library/vs.png'style='margin-top: -2px;'> <font></font> </p></c:otherwise> </c:choose>
問題解答
回答1：你的代碼突破天際的長。問題的描述我沒看懂，我問問你是想隔行有效，還是不想隔行有效。
每行都有效的話，直接寫：hover就可以
隔行有效的，用css的選擇器2n還是2n+1就看你是想用奇數還是偶數了。nth-of-type()。。odd和even也行
回答2：不允許使用js操作？
相關文章：
網公網安備