Question

我正在制作需要点击的内容卡。点击这些卡片即可进入您可以看到完整内容的页面。此外，对于某些用户而言，这些卡片还具有链接，其中的链接通过不同的页面（如编辑或报告）。您可以在此处查看所需的设计： https://jsfiddle.net/4s8b5kb1/1/（该卡会转到更多详情页面）。

通过查看较旧的问题，我发现了一种方法，可以通过添加div处理程序或持久查看卡片onClick来查看卡片onClick。链接。理想情况下，我只想使用纯CSS而不想添加执行链接工作的div处理程序，而不是持久性地查看更多＆＃39;按钮也是。

我还阅读了您在z-index中创建链接然后使用div的策略，您可以将其作为整个z-index的链接，并拥有其他更多特定链接的function exist_kode($kode = 1) { $get = $this->db->query("SELECT * FROM perkiraan WHERE kode_perk='$kode'"); if($get->num_rows() == 0) { return $kode; } else { $this->exist_kode((int)$kode+1); } } 更高。

我试过但运气不好。以下是目前的代码：https://jsfiddle.net/4s8b5kb1/1/

非常感谢任何想法！

Answer 1

我把位置：亲戚放在编辑课上

.edit {
color: indianred;
font-size: 1rem;
z-index: 10;
position: relative;
}

您可以在此处查看：

.parent {
	display: flex;
	justify-content:center;
	align-items:center;
	height: 100vh;
}

.card {
	height: 200px;
	width: 260px;
	background: #FFF;
	border: 1px solid #FAFAFA;
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);
	border-radius: 20px;
	overflow-y: auto;
	
	padding: 2em;
	font-family: Courier New;

	font-size: 0.7rem;
	cursor: pointer;
	
	position: relative;

}

.card p {
	z-index: 10;
}

.edit {
	color: indianred;
	font-size: 1rem;
	z-index: 10;
  position: relative;
}

.view {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	opacity: 0;
}

<div class ="parent">

<div class="card">
   <a class="edit" href="#edit">EDIT</a>
   <a class="edit" href="#edit">REPORT</a>
	<p>
        For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us. As
        we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with
        a finger it would crumble and fall apart. Seeing this has to change a man. When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!
    </p>
	<a class = "view" href = "#view">View</a>
</div>
</div>