javascript - 如何使网格中的背景图像可点击？

Question

我有一个图像网格作为我的主屏幕，上面有文字分层。它位于对行有最小高度要求但没有最大值的网格中。 colums 只是整个屏幕尺寸的一小部分，因此它们没有设置宽度。这就是我被困的地方，如何在不知道它们的大小的情况下使它们可链接？谢谢!

HTML

<div class="grid">

    <div class="f f1" href="me">
        <div class="t">
            <h3>Scum Fuck Flower Boy</h3>
            <p>Tyler the Creator</p>
        </div>
    </div>

    <div class="f f2">
        <div class="t">
            <h3>No Dope on Sundays</h3>
            <p>CyHi da Prynce</p>
        </div>
    </div>

    <div class="f f3">
        <div class="t">
            <h3>The Life of Pablo</h3>
            <p>Kanye West</p>
        </div>
    </div>

    <div class="f f4">
        <div class="t">
            <h3>Kanye and Kim have a kid</h3>
        </div>
    </div>

    <div class="f f5">
        <div class="t">
            <h3>My Beatutiful Dark Twisted Fantasy</h3>
            <p>Kanye West</p>
        </div>
    </div>

</div>

CSS

.grid { 
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 350px;
margin: 30px 150px 30px 150px;
position: relative;
}

.f {
width: 100%;
height: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-color: grey;
}

.t {
position: absolute;
bottom: 0;
left: 0;
margin: 0;
margin-bottom: 10px;
}

.t h3 {
color: white;
position: relative;
font-size: 2rem;
font-weight: 500;
font-style: bold;
padding-left: 15px;
}

.t p {
color: white;
position: relative;
font-size: 1.2rem;
font-weight: 400;
padding-left: 15px;
}

.f1 {
grid-column: 1/3;
grid-row: 1/3;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/tyler.jpg");
}

.f2 {
grid-column: 3/4;
grid-row: 1/2;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/dope.jpg");

}

.f3 {
grid-column: 3/4;
grid-row: 2/4;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/kanye.jpg");

}

.f4 {
grid-column: 1/2;
grid-row: 3/4;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/selfie.jpg");

}

.f5 {
grid-column: 2/3;
grid-row: 3/4;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/fantasy.jpg");

}

Answer 1

纯 CSS HTML 方法是添加一个封面 anchor 元素:

<div class="f f1">
    <div class="t">
        <h3>Scummy Flower Boy</h3>
        <p>Tyler the Creator</p>
    </div>
    <a class="overclick" href="/url/to/go/somewhere">Some google happy text</a>
</div>

将其添加到 .f 类中以为其提供基础:

.f {
    ...
    position: relative;/* shouldn't affect your grid */
    }

然后 anchor 的特殊 css 将很简单:

a.overclick {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: 0;
    text-indent: -999em;/* to hide its text from humans, but google is still happy */
    }
    a.overclick:hover {
        /* this just lightly fades when you hover, can be excluded */
        background-color: #fff;
        opacity: 0.12;
        }

这会创建一个“填充”每个 f div 的 anchor 链接元素，因此当您单击它时，它会到达某个地方。但是您看不到它，它就在那里。我们已经在一些不希望 javascript 以这种方式处理点击事件的网站上使用它。

---

现在，一个使用 jQuery 方法的 javascript 方法。将此添加到类 f 的 div 中:

<div class="f f1" goto="/url/to/somewhere">
     ...
</div>

然后是脚本 block :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $( document ).ready(function() {
        $(".f").click(function(e){
            window.location = $(this).attr('goto');
        });
    });
</script>