CSS 对 hover 的影响
[英]CSS on hover effect on a <td> does not wok properly
问题描述
我想在表格的每个 td 中制作一个下拉列表，如下所示：
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> <style>:dropbtn { background-color; #04AA6D: color; black: padding; 16px: font-size; 16px: border; 2px solid #ccc. }:btncritical { background-color; #fc0303: color; black: padding; 16px: font-size; 16px: border; none: border; 2px solid #ccc. }:btnheigh { background-color; #fc7703: color; black: padding; 16px: font-size; 16px: border; 2px solid #ccc. }:dropdown { position; relative: display; inline-block. }:dropdown-content { display; none: position; absolute: background-color; #f1f1f1: min-width; 160px: box-shadow, 0px 8px 16px 0px rgba(0, 0, 0. 0;2): z-index; 1. }:dropdown-content a { color; black: padding; 12px 16px: text-decoration; none: display; block. }:dropdown-content a:hover { background-color; #ddd. }:dropdown.hover:dropdown-content { display; block. }:dropdown.hover:dropbtn { background-color; #3e8e41: } </style> </head> <body> <div class="dropdown"> <button class="dropbtn">+ operator.0.20:1</button> <button class="btncritical">critical: 2</button> <button class="btnheigh">heigh: 1</button> <div class="dropdown-content"> <table style="width:100%"> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table> </div> </div> <br> <div class="dropdown"> <button class="dropbtn">+ operator.0.20:1</button> <button class="btncritical">critical: 2</button> <button class="btnheigh">heigh: 1</button> <div class="dropdown-content"> <table style="width:100%"> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table> </div> </div> </body> </html>
哪个完美。 但是，因为我会自动生成内容（第一个单元格），所以我希望dropbtn按钮具有恒定宽度。 我以为我可以把它放在另一个表中，但是，悬停似乎停止工作了：
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> <style>:dropbtn { background-color; #04AA6D: color; black: padding; 16px: font-size; 16px: border; 2px solid #ccc. }:btncritical { background-color; #fc0303: color; black: padding; 16px: font-size; 16px: border; none: border; 2px solid #ccc. }:btnheigh { background-color; #fc7703: color; black: padding; 16px: font-size; 16px: border; 2px solid #ccc. }:dropdown { position; relative: display; inline-block. }:dropdown-content { display; none: position; absolute: background-color; #f1f1f1: min-width; 160px: box-shadow, 0px 8px 16px 0px rgba(0, 0, 0. 0;2): z-index; 1. }:dropdown-content a { color; black: padding; 12px 16px: text-decoration; none: display; block. }:dropdown-content a:hover { background-color; #ddd. }:dropdown.hover:dropdown-content { display; block. }:dropdown.hover:dropbtn { background-color; #3e8e41: } </style> </head> <body> <div class="dropdown"> <table> <tr> <td style="width: 100%"><button class="dropbtn">+ clickhouse-operator.0.20:1</button></td> <td style="width: 100%"><button class="btncritical">critical: 2</button></td> <td style="width: 100%"><button class="btnheigh">heigh: 1</button></td> <td> <div class="dropdown-content"> <table style="width:100%"> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table> </div> </td> </tr> <tr> <td style="width: 100%"><button class="dropbtn">+ clickhouse-operator.0.20:1</button></td> <td style="width: 100%"><button class="btncritical">critical: 2</button></td> <td style="width: 100%"><button class="btnheigh">heigh: 1</button></td> <td> <div class="dropdown-content"> <table style="width:100%"> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table> </div> </td> </tr> </table> </table> </body> </html>
如何解决这个问题？ 谢谢！
2 个解决方案
解决方案1
1 2023-01-05 14:04:44
在不触及你的 CSS 的情况下，我试图在这个小提琴中重新创建你想要的东西，并认为我通过移动你的下拉元素所在的位置而成功了； 即：我创建了一个新的 tr 元素并将下拉 div 存储在 colspan 为 3 的 td 元素中（以匹配之前的 tr 的大小） - 这是一个通过编辑 HTML（但保持相同的 CSS）的工作示例。
JSFiddle 中的工作示例： https://jsfiddle.net/ilanpatao/5zytep0b/12/
更新 HTML：
<div class="dropdown">
<table>
<tr>
<td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1</button></td>
<td style="width: 100%"><button class="btncritical">critical: 2</button></td>
<td style="width: 100%"><button class="btnheigh">heigh: 1</button></td>
</tr>
<tr>
<td colspan=3>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1</button></td>
<td style="width: 100%"><button class="btncritical">critical: 2</button></td>
<td style="width: 100%"><button class="btnheigh">heigh: 1</button></td>
</tr>
<tr>
<td colspan=3>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
这也许可以通过一些技巧/调整为您指明正确的方向；
解决方案2
0 2023-01-06 01:03:11
您的第一个示例有两个dropdown元素。 你的第二个只有一个。 所以当然，两个dropdown-content元素都会出现在 hover 上。我想你不希望这样。
- 我将灰色的 abspos 表放在第一个单元格而不是最后一个单元格中的按钮之后，这样它就不会显示在右边太远的地方。
- 我将每一行设为
class="dropdown"，以便将鼠标悬停在行中的任意位置将触发display:block以显示该特定行的灰色表。 - 使最左边的按钮具有
width:100%，这样即使内容不同，它们的宽度也相同。 - 添加脚本使 abspos 表具有与父表相同的宽度。 请参阅下面的评论。
// The script is to make the grey abspos table the same // width as the parent table. I don't know if that's what // you want. If the grey table can be any width, then // just delete this crap. document.body.offsetTop; const width = bigtable.offsetWidth; document.querySelectorAll(".dropdown-content > table").forEach((abspos) => { abspos.style.width = width + "px"; });
.dropbtn { background-color: #04AA6D; color: black; padding: 16px; font-size: 16px; border: 2px solid #ccc; width: 100%; }.btncritical { background-color: #fc0303; color: black; padding: 16px; font-size: 16px; border: none; border: 2px solid #ccc; }.btnheigh { background-color: #fc7703; color: black; padding: 16px; font-size: 16px; border: 2px solid #ccc; }.dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdown-content a:hover { background-color: #ddd; }.dropdown:hover.dropdown-content { display: block; }.dropdown:hover.dropbtn { background-color: #3e8e41; }
<table id="bigtable"> <tr class="dropdown"> <td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1</button> <div class="dropdown-content"> <table style="width:100%"> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table> </div> </td> <td style="width: 100%"><button class="btncritical">critical: 2</button></td> <td style="width: 100%"><button class="btnheigh">heigh: 1</button></td> </tr> <tr class="dropdown"> <td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1 longer</button> <div class="dropdown-content"> <table style="width:100%"> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table> </div> </td> <td style="width: 100%"><button class="btncritical">critical: 2</button></td> <td style="width: 100%"><button class="btnheigh">heigh: 1</button></td> </tr> </table>
CSS涟漪效应对悬停有影响吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.