使用 rowspan 悬停在 td 上时出现问题
Posted
技术标签:
【中文标题】使用 rowspan 悬停在 td 上时出现问题【英文标题】：Trouble hovering over td with rowspan 【发布时间】：2019-03-01 09:55:19 【问题描述】：当我尝试将鼠标悬停在带有行跨度的 td 上时，我遇到了一些问题。我找不到解决方案。我在一些论坛上看到我可能需要 JS/jQuery ......有人可以给我一个解决方案吗？我将向您展示我的代码.. 我只需要开始一些东西，然后我可以解决它....
<table>
<tr>
<th></th>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td>7:00</td>
<td rowspan="8" style="background-color:rgb(0,187,109)">
<p class="tt-table-p">Cardiology</br> <span class="tt-table-r"> Room 16 </span> </br></br> <span class="tt-table-hours"> 07:00 - 11:00 </span></br> Dr. Max Turner</p>
</td>
<td style="background-color:rgb(242,243,248);"></td>
<td rowspan="5" style="background-color:rgb(0,182,255)">
<p class="tt-table-p">Neurology</br> <span class="tt-table-r"> Room 11 </span> </br></br> <span class="tt-table-hours"> 07:00 - 9:00 </span></br> Dr. Jason Clark</p>
</td>
<td rowspan="10" style="background-color:rgb(222,184,135)">
<p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r"> Room 25 </span> </br></br> <span class="tt-table-hours"> 07:00 - 12:00 </span></br> Dr. Amy Adams</p>
</td>
<td style="background-color:rgb(242,243,248);"></td>
<td rowspan="7" style="background-color:rgb(199,115,191)">
<p class="tt-table-p">Traumatology</br> <span class="tt-table-r"> Room 32 </span> </br></br> <span class="tt-table-hours"> 07:00 - 10:30 </span></br> Dr. Peter Wilson</p>
</td>
<td rowspan="7" style="background-color:rgb(0,187,109)">
<p class="tt-table-p">Cardiology</br> <span class="tt-table-r"> Room 16 </span> </br></br> <span class="tt-table-hours"> 07:00 - 10:30 </span></br> Dr. Max Turner</p>
</td>
</tr>
<tr>
<td></td>
<td rowspan="3" style="background-color:rgb(0,182,255)">
<p class="tt-table-p">Neurology</br> <span class="tt-table-r"> Room 11 </span> </br></br> <span class="tt-table-hours"> 07:30 - 9:00 </span></br> Dr. Jason Clark</p>
</td>
<td rowspan="4" style="background-color:rgb(0,182,255)">
<p class="tt-table-p">Dentistry</br> <span class="tt-table-r"> Room 11 </span> </br></br> <span class="tt-table-hours"> 07:00 - 9:00 </span></br> Dr. Jason Clark</p>
</td>
</tr>
<tr>
<td>8:00</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>9:00</td>
<td rowspan="3" style="background-color:rgb(0,187,109)">
<p class="tt-table-p">Cardiology</br> <span class="tt-table-r"> Room 16 </span> </br></br> <span class="tt-table-hours"> 09:00 - 10:30 </span></br></br> <span class="tt-table-dr"> Dr. Max Turner</p>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="7" style="background-color:rgb(255,104,90)">
<p class="tt-table-p">Pediatrics</br> <span class="tt-table-r"> Room 15 </span> </br></br> <span class="tt-table-hours"> 09:30 - 13:00 </span></br></br> <span class="tt-table-dr"> Dr. Julia Jameson</p>
</td>
</tr>
<tr>
<td>10:00</td>
<td rowspan="5" style="background-color:rgb(199,115,191)">
<p class="tt-table-p">Traumatology</br> <span class="tt-table-r"> Room 32 </span> </br></br> <span class="tt-table-hours"> 10:00 - 12:30 </span></br></br> <span class="tt-table-dr"> Dr. Peter Wilson</p>
</td>
</tr>
<tr>
<td></td>
<td rowspan="3" style="background-color:rgb(255,104,90)">
<p class="tt-table-p">Pediatrics</br> <span class="tt-table-r"> Room 15 </span> </br></br> <span class="tt-table-hours"> 10:30 - 12:00 </span></br></br> <span class="tt-table-dr"> Dr. Julia Jameson</p>
</td>
<td rowspan="6" style="background-color:rgb(76,76,191)">
<p class="tt-table-p">Diagnostics</br> <span class="tt-table-r"> Room 15 </span> </br></br> <span class="tt-table-hours"> 10:30 - 13:30 </span></br></br> <span class="tt-table-dr"> Dr. Helen Wilson</p>
</td>
<td rowspan="4" style="background-color:rgb(199,115,191)">
<p class="tt-table-p">Traumatology</br> <span class="tt-table-r"> Room 32 </span> </br></br> <span class="tt-table-hours"> 10:30 - 12:30 </span></br></br> <span class="tt-table-dr"> Dr. Peter Wilson</p>
</td>
</tr>
<tr>
<td>11:00</td>
<td rowspan="4" style="background-color:rgb(0,182,255)">
<p class="tt-table-p">Dentistry</br> <span class="tt-table-r"> Room 11 </span> </br></br> <span class="tt-table-hours"> 11:00 - 13:00 </span></br></br> <span class="tt-table-dr"> Dr. Jason Clark</p>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>12:00</td>
<td rowspan="4" style="background-color:rgb(0,106,121)">
<p class="tt-table-p">Pulmonary</br> <span class="tt-table-r"> Room 113 </span> </br></br> <span class="tt-table-hours"> 12:00 - 14:00 </span></br></br> <span class="tt-table-dr"> Dr. Rodney Stratton </span></p>
</td>
<td rowspan="4" style="background-color:rgb(0,106,121)">
<p class="tt-table-p">Pulmonary</br> <span class="tt-table-r"> Room 113 </span> </br></br> <span class="tt-table-hours"> 12:00 - 14:00 </span></br></br> <span class="tt-table-dr"> Dr. Rodney Stratton </span></p>
</td>
</tr>
<tr>
<td></td>
<td rowspan="5" style="background-color:rgb(255,104,90)">
<p class="tt-table-p">Pediatrics</br> <span class="tt-table-r"> Room 15 </span> </br></br> <span class="tt-table-hours"> 12:30 - 15:00 </span></br></br> <span class="tt-table-dr"> Dr. Julia Jameson </span></p>
</td>
<td rowspan="5" style="background-color:rgb(222,184,135)">
<p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r"> Room 25 </span> </br></br> <span class="tt-table-hours"> 12:30 - 15:00 </span></br></br> <span class="tt-table-dr"> Dr. Amy Adams </span></p>
</td>
</tr>
<tr>
<td>13:00</td>
<td rowspan="4" style="background-color:rgb(222,184,135)">
<p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r"> Room 25 </span> </br></br> <span class="tt-table-hours"> 13:00 - 15:00 </span></br></br> <span class="tt-table-dr"> Dr. Amy Adams </span></p>
</td>
<td rowspan="5" style="background-color:rgb(199,115,191)">
<p class="tt-table-p">Traumatology</br> <span class="tt-table-r"> Room 32 </span> </br></br> <span class="tt-table-hours"> 13:00 - 15:30 </span></br></br> <span class="tt-table-dr"> Dr. Peter Wilson </span></p>
</td>
</tr>
<tr>
<td></td>
<td rowspan="5" style="background-color:rgb(0,187,109)">
<p class="tt-table-p">Cardiology</br> <span class="tt-table-r"> Room 16 </span> </br></br> <span class="tt-table-hours"> 13:30 - 16:00 </span></br></br> <span class="tt-table-dr"> Dr. Max Turner </span></p>
</td>
</tr>
<tr>
<td>14:00</td>
<td></td>
</tr>
<tr>
<td></td>
<td rowspan="6" style="background-color:rgb(199,115,191)">
<p class="tt-table-p">Traumatology</br> <span class="tt-table-r"> Room 32 </span> </br></br> <span class="tt-table-hours"> 14:30 - 17:30 </span></br></br> <span class="tt-table-dr"> Dr. Peter Wilson </span></p>
</td>
<td rowspan="5" style="background-color:rgb(0,187,109)">
<p class="tt-table-p">Cardiology</br> <span class="tt-table-r"> Room 16 </span> </br></br> <span class="tt-table-hours"> 14:30 - 17:00 </span></br></br> <span class="tt-table-dr"> Dr. Max Turner </span></p>
</td>
</tr>
<tr>
<td>15:00</td>
<td rowspan="5" style="background-color:rgb(0,187,109)">
<p class="tt-table-p">Cardiology</br> <span class="tt-table-r"> Room 16 </span> </br></br> <span class="tt-table-hours"> 15:00 - 17:30 </span></br></br> <span class="tt-table-dr"> Dr. Max Turner </span></p>
</td>
<td rowspan="5" style="background-color:rgb(0,106,121)">
<p class="tt-table-p">Pulmonary</br> <span class="tt-table-r"> Room 113 </span> </br></br> <span class="tt-table-hours"> 15:00 - 17:30 </span></br></br> <span class="tt-table-dr"> Dr. Rodney Stratton </span></p>
</td>
<td rowspan="4" style="background-color:rgb(0,106,121)">
<p class="tt-table-p">Pulmonary</br> <span class="tt-table-r"> Room 113 </span> </br></br> <span class="tt-table-hours"> 15:00 - 17:00 </span></br></br> <span class="tt-table-dr"> Dr. Rodney Stratton </span></p>
</td>
</tr>
<tr>
<td></td>
<td rowspan="4" style="background-color:rgb(255,104,90)">
<p class="tt-table-p">Pediatrics</br> <span class="tt-table-r"> Room 15 </span> </br></br> <span class="tt-table-hours"> 15:30 - 17:30 </span></br></br> <span class="tt-table-dr"> Dr. Julia Jameson </span></p>
</td>
</tr>
<tr>
<td>16:00</td>
<td rowspan="7" style="background-color:rgb(255,104,90)">
<p class="tt-table-p">Pediatrics</br> <span class="tt-table-r"> Room 15 </span> </br></br> <span class="tt-table-hours"> 16:30 - 19:30 </span></br></br> <span class="tt-table-dr"> Dr. Julia Jameson </span></p>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>17:00</td>
<td rowspan="5" style="background-color:rgb(76,76,191)">
<p class="tt-table-p">Diagnostics</br> <span class="tt-table-r"> Room 15 </br></br> <span class="tt-table-hours"> 17:00 - 19:30 </span></br></br> <span class="tt-table-dr"> Dr. Helen Wilson </span></p>
</td>
<td rowspan="5" style="background-color:rgb(76,76,191)">
<p class="tt-table-p">Diagnostics</br> <span class="tt-table-r"> Room 15 </br></br> <span class="tt-table-hours"> 10:30 - 13:30 </span></br></br> <span class="tt-table-dr"> Dr. Helen Wilson </span></p>
</td>
</tr>
<tr>
<td></td>
<td rowspan="4" style="background-color:rgb(255,104,90)">
<p class="tt-table-p">Pediatrics</br> <span class="tt-table-r"> Room 15 </br></br> <span class="tt-table-hours"> 17:30 - 19:30 </span></br></br> <span class="tt-table-dr"> Dr. Julia Jameson </span></p>
</td>
<td rowspan="4" style="background-color:rgb(0,106,121)">
<p class="tt-table-p">Pulmonary</br> <span class="tt-table-r"> Room 113 </br></br> <span class="tt-table-hours"> 17:30 - 19:30 </span></br></br> <span class="tt-table-dr"> Dr. Rodney Stratton </span></p>
</td>
<td rowspan="4" style="background-color:rgb(222,184,135)">
<p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r"> Room 25 </br></br> <span class="tt-table-hours"> 12:30 - 15:00 </span></br></br> <span class="tt-table-dr"> Dr. Amy Adams </span></p>
</td>
<td rowspan="4" style="background-color:rgb(222,184,135)">
<p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r"> Room 25 </br></br> <span class="tt-table-hours"> 12:30 - 15:00 </span></br></br> <span class="tt-table-dr"> Dr. Amy Adams </span></p>
</td>
</tr>
<tr>
<td>18:00</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>19:00</td>
</tr>
</table>
</div>
</body>
.tt-table-container table tr th
font-weight: normal;
font-size:14px;
width:60px;
height:60px;
text-align:center;
.tt-table-container table
width:100%;
margin-top:30px;
.tt-table-container table tr td
height:60px;
.tt-table-container table tr td
width:12.5%;
font-size:15.5px;
.tt-table-container table tr td[rowspan]
vertical-align: top;
padding-top:20px;
font-size:13.5px;
.tt-table-container table tr:nth-child(2n) td:first-of-type
background-color:rgb(242,243,248);
font-size:14px;
.tt-table-p
color:rgba(255,255,255,0.9);
letter-spacing: 1px;
.tt-table-r
font-size:14px;
.tt-table-hours
font-size:13.5px;
color:rgba(255,255,255,0.5);
.tt-table-dr
font-size:13.5px;
.tt-green:hover
background-color:red;
我正在尝试使用悬停效果重现此表：
https://www.templatemonster.com/demo/69211.html 打开模板后，从菜单中转到“部门”。
【问题讨论】：
请勿将代码粘贴到场外，仅提供链接。此类资源可能而且确实变得不可靠，从而使原始问题变得毫无用处。 我看到你有 .tt-green:hover background-color:red; 但我没有看到该类的任何元素 那是我试过的东西，我忘了从 css 文件中删除它 【参考方案1】：您可以使用 javascript 函数中的鼠标悬停来尝试解决此问题。您在“onmouseover”中更改 td 的颜色（或执行任何其他操作），然后在“onmouseout”中将其改回。
查看我的代码：
**HTML：**
<tr>
<td></td>
<td onmouseover="changeColorRed(this)" onmouseout="normalColor(this)" rowspan="4" style="background-color:rgb(255,104,90)">
<p class="tt-table-p">Pediatrics</br> <span class="tt-table-r"> Room 15 </br></br> <span class="tt-table-hours"> 17:30 - 19:30 </span></br></br> <span class="tt-table-dr"> Dr. Julia Jameson </span></p>
</td>
<td onmouseover="changeColorRed(this)" onmouseout="normalColor(this)" rowspan="4" style="background-color:rgb(0,106,121)">
<p class="tt-table-p">Pulmonary</br> <span class="tt-table-r"> Room 113 </br></br> <span class="tt-table-hours"> 17:30 - 19:30 </span></br></br> <span class="tt-table-dr"> Dr. Rodney Stratton </span></p>
</td>
<td onmouseover="changeColorRed(this)" onmouseout="normalColor(this)" rowspan="4" style="background-color:rgb(222,184,135)">
<p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r"> Room 25 </br></br> <span class="tt-table-hours"> 12:30 - 15:00 </span></br></br> <span class="tt-table-dr"> Dr. Amy Adams </span></p>
</td>
<td onmouseover="changeColorRed(this)" onmouseout="normalColor(this)" rowspan="4" style="background-color:rgb(222,184,135)">
<p class="tt-table-p">Ophtalmology</br> <span class="tt-table-r"> Room 25 </br></br> <span class="tt-table-hours"> 12:30 - 15:00 </span></br></br> <span class="tt-table-dr"> Dr. Amy Adams </span></p>
</td>
</tr>
JavaScript：
function changeColorRed(x)
var temp = x.style.backgroundColor;
localStorage.setItem("color", temp); // store the last backgroundColor
x.style.backgroundColor = "red";
function normalColor(x)
var lastColor = localStorage.getItem('color'); // find the last backgroundColor
x.style.backgroundColor = lastColor;
【讨论】：
这适用于一种颜色。但是，如果我希望每个 td 更改为不同的颜色，我该如何解决？尝试了一些东西，但我无法管理它..谢谢..我找到的唯一解决方案是为每种颜色创建一个新的脚本文件 lol 您好，您可以在“changeColorRed”中添加您想要更改的颜色，然后它会根据您的选择动态更改。像这样：[link]jsfiddle.net/ate983Lg/3 注意：我没有成功将 Javascript 添加到 JS 窗口中，因此 JavaScript 代码嵌入在 HTML 代码中（在关闭 body 标记之前） 非常感谢！这正是我所需要的 我的荣幸 :))以上是关于使用 rowspan 悬停在 td 上时出现问题的主要内容，如果未能解决你的问题，请参考以下文章
Xamarin UWP - 如何摆脱悬停在按钮上时出现的边框