HTML 如何使div的背景可点击

在网页开发中，通常希望使整个区域可点击，而不仅仅是超链接。一种方法是将<div>元素的背景设置为特定的颜色或图像，然后使该背景成为可点击的链接。

方法1：使用锚点标签： 第一种方法是将整个<div>元素包裹在锚点标签（<a>）内。这样，点击<div>内任意位置都会触发链接。

语法：

<a href="yourLink">
    <div>
        <!-- Your content goes here -->
    </div>
</a>

示例： 在此示例中，我们将使用 a 标签使背景可点击。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Clickable Background</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: #666764;
            cursor: pointer;
        }
        .box:hover {
            background-color: #000000;
        }
    </style>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <a href=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-17.png">
        <div class="box">
            Click me!
        </div>
    </a>
</body>
</html>

输出：

HTML 如何使div的背景可点击

方法2：使用 JavaScript ：第二种方法是使用 JavaScript 来捕捉<div> 元素的点击事件，并将用户重定向到所需的链接。

语法：

<div onclick="location.href='yourLink';">
    <!-- Your content goes here -->
</div>

示例： 在这个示例中，我们将使用上述方法。

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Clickable Background</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20210720234436/gfglogo2-300x300.jpg');
            cursor: pointer;
        }
        .box:hover {
            opacity: 0.7;
        }
    </style>
</head>
 
<body>
    <div class="box"
         onclick=`location.href=
'https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-17.png' `>
        Click me!
    </div>
</body>
</html>

输出：

HTML 如何使div的背景可点击