gpt4 book ai didi

javascript - 表格和鼠标悬停效果(悬停)

转载 作者:行者123 更新时间:2023-11-28 04:57:53 25 4
gpt4 key购买 nike

我有这张表:

<table border="1">
<tr>
<td></td>
<td>Banana</td>
<td>Orange</td>
<td>Plum</td>
</tr>
<tr>
<td>Banana</td>
<td>1:1</td>
<td>1:2</td>
<td>1:3</td>
</tr>
<tr>
<td>Orange</td>
<td>2:1</td>
<td>1:1</td>
<td>1,5:1</td>
</tr>
<tr>
<td>Plum</td>
<td>1:3</td>
<td>2:1</td>
<td>1:1</td>
</tr>

和 CSS:

    td {
height:60px;
width:60px;
text-align:center;
}

td:hover{
background-color:red;
}

我想做的是,当我将鼠标指向 1:3 表格单元格时,它应该与 Banana 和 Plum 单元格一起突出显示。

有什么简单的方法吗?

这是 fiddle : http://jsfiddle.net/CZEJT/

最佳答案

如果您不介意其中的一些 Javascript 以确保兼容性,请查看此 JSFiddle

HTML:

<table>
<tr>
<th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
</tr>

<tr>
<th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>

<tr>
<th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>

<tr>
<th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>

<tr>
<th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</table>

CSS:

table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}

td, th, .ff-fix {
cursor: pointer;
padding: 10px;
position: relative;
}

td:hover::after,
.ff-fix:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
tr:hover{
background-color: #ffa;
}
}

JS:

function firefoxFix() {

if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {

var tds = document.getElementsByTagName( 'td' );

for( var index = 0; index < tds.length; index++ ) {
tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';
};

var style = '<style>'
+ 'td { padding: 0 !important; }'
+ 'td:hover::before, td:hover::after { background-color: transparent !important; }'
+ '</style>';
document.head.insertAdjacentHTML( 'beforeEnd', style );

};

};

firefoxFix();

关于javascript - 表格和鼠标悬停效果(悬停),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19907460/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com