文章詳情頁

css - 關于table tr的樣式問題 hover怎么變得是隔行才有反應

瀏覽：154日期：2023-01-25 11:59:33

以下是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><link rel='stylesheet' href='http://m.b3g6.com/resource/func/js/testArea/css/city-picker.css'><link rel='stylesheet' href='http://m.b3g6.com/resource/func/js/testArea/css/industry-picker-fx.css'><link rel='stylesheet' href='http://m.b3g6.com/resource/func/js/testArea/css/industry-picker.css'><link rel='stylesheet' href='http://m.b3g6.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'> <form action='/lgip/all/map/index'method='post'> <jsp:include page='../../views/include/includeNavHeader.jsp'><jsp:param name='nav' value='SY' /> </jsp:include> <jsp:include page='../../views/include/includeMenu.jsp'> <jsp:param name='nav' value='PROVIEW' /></jsp:include> <input type='hidden' name='selectpage' value='${selectpage}'> <input type='hidden' value='${selectedIds }' name='selectedIds' /> <input type='hidden' name='section' /> <inputtype='hidden' name='selected' value='${selected}' /> 項目庫 項目分布 統計信息  <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'>項目分布 <img class=’col-xs-4’ src='http://m.b3g6.com/resource/images/proLibrary/map/mapbottom1.png'> 掛牌項目${sumnum}個 <imgsrc='http://m.b3g6.com/resource/images/proLibrary/map/mapbottom2.png'> <img src='http://m.b3g6.com/resource/images/proLibrary/map/mapbottom3.png'> 掛牌總金額${sumje/10000}億  <c:if test='${role == ’3’}'> <img alt=''src='http://m.b3g6.com/resource/images/proLibrary/library/compare.png'> 開始比較 <c:if test='${not empty selected }'>(${selected})</c:if> <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> 清空＜<ponclick='proNameNext()' style='padding: 0; cursor: pointer; width: 20px; height: 20px; position: absolute; left: 92%; top: 42%'>＞ </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'>項目庫 區域 <inputreadonly='readonly' type='text' value='${section}' data-toggle='city-picker'> 行業類別 <input readonly='readonly' type='text' name='business_picker' placeholder='請選擇'> <input type='hidden' name='category' value='${category}'> <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> 發布時間 <input type='text' id=’startTime’ name=’startTime’ datepicker placeholder=' 全部' readonly='readonly' value='${stime}'>一<input type='text' id=’endTime’ name=’endTime’ datepicker placeholder=' 全部' readonly='readonly' value='${etime}'> <palign='right'>合作方式 <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> 投資規模 <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;'>一<input type='text' id=’showMaxAmt’ name=’showMaxAmt’ placeholder='' maxlength='9' onblur='changeAmtBlur(’max’);' onfocus='changeAmtFocus(’max’);' value='' style='width: 128px; padding-left: 10px;'> <palign='right'>關鍵字 <input type='text' id=’keyWords’ name=’keyWords’ placeholder='區域、編號、名稱等關鍵字' value='${keyWords }'style='width: 280px;'> 搜索 重置 <input type='hidden' name='sort' value='${sort}'> 截止時間  瀏覽量 <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'>項目編號</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'>項目名稱</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'>所屬行業</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'>所在區域</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></td></tr> </table> <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> <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;'> ${item.proNo} </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} </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} </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} </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}'> </c:if> <c:if test='${item.userId==userId}'> </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}’)'>查看詳情 --%>  <c:choose><c:when test='${!(item.focusFlag) }'><ponclick='compare(this);' id='${item.id}'> <img alt='對比'src='http://m.b3g6.com/resource/images/proLibrary/library/vs.png'style='margin-top: -2px;'> </c:when><c:otherwise><ponclick='cancelCompare(this);' id='${item.id}'> <img alt='對比'src='http://m.b3g6.com/resource/images/proLibrary/library/vs2.png' style='margin-top: -2px;'> </c:otherwise> </c:choose></c:when><c:when test='${ (role == ’3’ && (item.lockFlag ) && (item.lockUser == userId) )}'>  <ponclick='showTip(’tz1’);' id='${item.id}'><img alt='對比'src='http://m.b3g6.com/resource/images/proLibrary/library/vs.png'style='margin-top: -2px;'>  </c:when><c:when test='${ (role == ’3’ && (item.lockFlag ) && (item.lockUser != userId) )}'>  <ponclick='showTip(’tz2’);' id='${item.id}'><img alt='對比'src='http://m.b3g6.com/resource/images/proLibrary/library/vs.png'style='margin-top: -2px;'>  </c:when><c:otherwise>  <ponclick='showTip(’xm’);' id='${item.id}'><img alt='對比'src='http://m.b3g6.com/resource/images/proLibrary/library/vs.png'style='margin-top: -2px;'>  </c:otherwise> </c:choose>

問題解答

回答1：

你的代碼突破天際的長。問題的描述我沒看懂，我問問你是想隔行有效，還是不想隔行有效。

每行都有效的話，直接寫：hover就可以

隔行有效的，用css的選擇器2n還是2n+1就看你是想用奇數還是偶數了。nth-of-type()。。odd和even也行

回答2：

不允許使用js操作？

CSS

上一條：html - 這種下拉怎么實現比較好下一條：html5 - H5網頁可以實現類似于App推送一樣的功能嗎

相關文章：

1. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能？3. javascript - 移動端上不能實現拖拽布局嗎？4. 實現bing搜索工具urlAPI提交5. thinkPHP5中獲取數據庫數據后默認選中下拉框的值，傳遞到后臺消失不見。有圖有代碼，希望有人幫忙6. javascript - react native在run-android時出現這個錯誤該怎么解決？大神賜教7. javascript - 如何判斷不同兩個對象觸發同一事件？8. angular.js - 單頁應用（ng/vue）該如何監聽用戶離開當前頁面（或者路由）？9. javascript - ios返回不執行js怎么解決？10. index.php錯誤，求指點

排行榜

					
					javascript - sublime快鍵鍵問題
javascript - immutable配合react提升性能？
javascript - 移動端上不能實現拖拽布局嗎？
實現bing搜索工具urlAPI提交
c++ - QWebEngineView加載url后直接點擊鏈接沒有反應要怎么解決？
javascript - ios返回不執行js怎么解決？
javascript - 如何判斷不同兩個對象觸發同一事件？
thinkPHP5中獲取數據庫數據后默認選中下拉框的值，傳遞到后臺消失不見。有圖有代碼，希望有人幫忙
javascript - react native在run-android時出現這個錯誤該怎么解決？大神賜教
angular.js - 單頁應用（ng/vue）該如何監聽用戶離開當前頁面（或者路由）？
前端 - 這段代碼一直生效不了，查半天因為 top: 0px; 分號后一個隱藏的東西，也不是占位符...刪了就可以生效，這是什么情況。。
				

熱門標簽

日本不卡不码高清免费观看,久久国产精品久久w女人spa,黄色aa久久,三上悠亚国产精品一区二区三区

css - 關于table tr的樣式問題 hover怎么變得是隔行才有反應