使标题图像右侧部分可点击答案

【问题标题】：Make header image right part clickable使标题图像右侧部分可点击
【发布时间】：2018-09-28 10:05:12
【问题描述】：

我有一个全页宽度的页眉。该标题具有带有背景图像的 CSS。在该图像的中心有一些文本，并且在该图像的右侧绘制了一个“联系我们”框。如何使该按钮可点击（以便用户点击它并点击链接）。最好只有该标题图像的右侧部分应该是可点击的。这个可以用jquery做吗？

欢迎黑客攻击。

【问题讨论】：

嗨，你能分享你的代码吗？
嗨，代码在哪里？
使用图片映射：developer.mozilla.org/en-US/docs/Web/HTML/Element/map

标签： jquery html css hyperlink href

【解决方案1】：

看来您的问题更多是关于如何构建导航菜单。

我建议您使用 CSS 内置的“网格”。通过这样做，您可以在顶部栏中构建多个区域并添加图片或文本。我不建议您使用图像地图，因为您使用的定位不会根据您的设备进行调整。

下面有一个使用网格的基础。为简单起见，我添加了 HTML 和 CSS。如果您的目标是创建导航栏，则需要添加文本链接并将其定位到相应的区域。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test</title>

<!--CSS-->
<style>

.wrapper {
  display: grid;
  grid-template-columns:
  1fr
  1fr
  1fr
  ;
  grid-template-rows:
  100px
  ;
  grid-template-areas:
  "header-1-left header-1-mid header-1-right"
  ;
  }

  .header-1-left {grid-area: header-1-left; background-color: grey;}
  .header-1-mid {grid-area: header-1-mid; background-color: pink;}
  .header-1-right {grid-area: header-1-right; background-color: lightblue;}

</style>

<div class="wrapper">
  <div class="header-1-left"></div>
  <div class="header-1-mid"></div>
  <div class="header-1-right"></div>
</div>


</head>
<body>

</body>
</html>

【讨论】：

【解决方案2】：

您已经使用position: relative 为标题和position: absolute 为元素创建它。试试这个代码。

<div class="header">
    <a href="#" class="link"></a>
</div>

.header {
    position: relative;
}
.header .link {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100px;
    z-index: 2;
}

【讨论】：