javascript - 使背景图像在 CSS 网格中可点击

Question

我有一个带有背景图片的 div 标签。怎样才能使那个 div 标签在大屏幕和小屏幕上变成超链接呢？它是这样的吗？:onclick='window.location.href="https://www.google.com"'。

HTML:

<div class="sbp-item6"></div>

CSS:

.sbp-item10 {
    grid-row: 6 / 7;
    grid-column: 1/5;
    height: 250px;
    background-image: url("https://placehold.it/380x250");
}

Answer 1

如果您使用 jQuery:

$( ".sbp-item6" ).click(function() {
     window.location.href = "https://www.google.com";
});

我认为如果你有不同的div需要指向不同的url，更好的解决办法是给div设置一个属性作为url。在js中检索它。并用它来指向 url 本身。

<div class="sbp-item6" link-to="http://www.google.com"></div>
$( ".sbp-item6" ).click(function() {
    var url = $(this).attr("link-to");
    window.location.href = url;
});

最后，在 css 中:

.sbp-item6
{
    cursor: pointer;
}