如何使 css 中的网格行可点击

Question

我有一个 1 行 4 列的网格设置。该行的宽度为 85%。我希望整行在悬停时改变颜色并且可以点击以访问另一个页面..

根据我当前的设置，该行会更改颜色并且可以单击，但是，link 在 85% 宽度之外处于活动状态，这意味着如果用户单击该行的左侧或右侧， link 仍然有效。我希望 link 仅在单击实际行时激活。

/* CSS CODE */
.ListWrapper {
    display:grid;
    grid-template-columns:1.5fr 1.8fr 1.5fr 1fr;
    grid-template-rows:1fr;
    grid-template-areas: "ListTitleTxt email phone groups";
    background-color:#EDF5FC;
    cursor:pointer;
    margin:auto;
    width:85% }

.ListWrapper:hover { background-color:#1b9bff; color:white; }

.BlackLink:link { text-decoration:none; color:black; }

/* HTML CODE */
<a class='BlackLink' href='#'>
<div class='ListWrapper'>
    <div class='ListTitleTxt'>name</div>
    <div class='email'>email</div>
    <div class='phone'>phone</div>
    <div class='groups'>groups</div></div>
</div></a>

Answer 1

我可以通过在宽度为 85% 的 a 标签之前添加额外的 div，然后将 ListWrapper 的宽度更改为 100% 来解决这个问题。

JSfiddle Example

.ListLink { width:80%; margin:auto; }
.ListLink:hover { background-color:#1b9bff; color:white; }

.ListWrapper {
    display:grid;
    grid-template-columns:1.5fr 1.8fr 1.5fr 1fr;
    grid-template-rows:1fr;
    grid-template-areas: "ListTitleTxt email phone groups";
    background-color:#EDF5FC;
    cursor:pointer;
    margin:auto;
    width:100% }

.ListWrapper:hover { background-color:#1b9bff; color:white; }
.BlackLink:link { text-decoration:none; color:black; }

<div class='ListLink'>
<a href='#' class='BlackLink'>
<div class='ListWrapper'>
    <div class='ListTitleTxt'>name</div>
    <div class='email'>email</div>
    <div class='phone'>phone</div>
    <div class='groups'>groups</div>
</div></a>
</div>

如何使 css 中的网格行可点击

How do I make the grid row clickable in css

html

css

grid