Question

我有一个表格，每个单元格中有一些悬停css和hrefs。我想这样做，如果你单击单元格中的任何地方，它将点击所述单元格内部的href，我真的不在乎这是多么草率，我只是想能够将这些单元格转换为按钮。我不知道从哪里开始，所以我不能真正包括我尝试的内容。任何帮助将不胜感激。

以下是悬停CSS的表格：

div[class*="et_pb_tab_"] td:hover{
    background: #0073a5 !important;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
div[class*="et_pb_tab_"] td:hover span{
    color: #fff !important;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

 <div class="et_pb_tab clearfix et_pb_tab_5 et-pb-active-slide" style="z-index: 1; display: block; opacity: 1;">
<div class="et_pb_tab_content">
	<h2 style="text-align: left;"><b>Table</b></h2>
		<table style="border-color: #AAA; height: 389px; background-color: #fff;" border="#595959" width="970" cellspacing="10" cellpadding="10">
			<tbody>
				<tr style="border-color: #595959; height: 24px;">
					<td style="border-color: #aaaaaa; height: 24px;">
						<h5>
							<a href="example.com">
								<span style="text-decoration: underline;"><span style="color: #1166dd; text-decoration: underline;">Row 1</span></span>
							</a>
						</h5>
					</td>
				</tr>
				<tr style="border-color: #595959; height: 24px;">
					<td style="border-color: #aaaaaa; height: 24px;">
						<h5>
							<a href="example.com">
								<span style="text-decoration: underline;"><span style="color: #1166dd; text-decoration: underline;">Row 1</span></span>
							</a>
						</h5>
					</td>
				</tr>
				<tr style="border-color: #595959; height: 24px;">
					<td style="border-color: #aaaaaa; height: 24px;">
						<h5>
							<a href="example.com">
								<span style="text-decoration: underline;"><span style="color: #1166dd; text-decoration: underline;">Row 1</span></span>
							</a>
						</h5>
					</td>
				</tr>
		</tbody>
	</table>
</div>
</div>

编辑：删除了jsfiddle并根据mod的建议添加了SO片段。

Answer 1

您可以尝试这样的事情：

CSS：

.table td{
  position: relative;
}

.table a{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  align-items: center;
}

http://jsfiddle.net/Ls26x5ed/5/

Answer 2

添加相对于td的位置，然后使a高度和宽度（100％）适合您的td。

td {
  position: relative;
}

td a {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Answer 3

试试这个

var Constructor = function () {
    var externalVariable = "foo";

    /**
     * This method does whatever it does.
     *
     * @?????? {string} externalVariable - closure variable from outer scope 
     */
    this.method = function() {
        console.log(externalVariable);
    }

}

CSS将单元格转换为按钮

3 个答案: