html - 按钮放在 img 标题字段内，可能吗？

Question

在处理一个元素时，我试图在 img 标题字段中放置一个按钮。我正在使用 boxslider，我正在尝试放置指向该按钮的 href 链接，但无法使其正常工作。

img src="images/1.jpg"title="asdad asd adad 测试"alt=""

只要我在 中输入 href="#"，它就不会工作。

有人知道这个问题的另一种解决方案吗？

查看现场示例:https://adamskymotorkylare.se/beta/ProjectX/

Answer 1

不，这不可能。 在另一个标签的属性内声明一个标签是非法的。它永远不会被解析为标签，而是解析为字符串。

我假设你想要你的 <img>用作按钮。这可以使用 anchor ( <a> ) 或按钮 ( <button> ) 标记作为 <img> 的包装器 轻松实现。标签:

<a href="#">
   <img src="...">
</a>

---

如果你想在 <img> 的标题属性中放置一个链接简单地说，这是不可能的。为了实现与此类似的效果，您需要将图像包装在定位的父级中并添加一个看起来像标题的工具提示，但实际上，当您将鼠标悬停在父级时显示的是一个正确的 DOM 元素，包含任何其他 DOM 元素你想要的，包括链接。

基本示例(概念验证):

.parent {
  position: relative;
}
.tooltip {
  display: inline-block;
  max-width: 300px;
  border-radius: 6px;
  background-color: rgba(255,255,255,.85);
  padding: 1rem;
  box-sizing: border-box;
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 5px 6px -3px rgba(0,0,0,.2), 0 9px 12px 1px rgba(0,0,0,.14), 0 3px 16px 2px rgba(0,0,0,.12);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1);
}
.tooltip:before {
  content: '';
  position: absolute;
  left: calc(50% - 12px);
  bottom: -25px;
  width: 1px;
  height: 1px;
  border: 12px solid transparent;
  border-top-color: white;
  opacity: .85;
}
.parent > img {
  width: 100%;
  height: auto;
}
.parent:hover .tooltip {
  top: 2rem;
  opacity: 1;
}

<div class="parent">
  <div class="tooltip"><a href="#">This</a> is a tooltip wannabe with a link.<br />You can go ahead and style it up so it looks more like a tooltip, or you could look into existing tooltip or popover plugins/libaries and use something that's tested cross-browser/cross-device. <br />
Intended as proof of concept.
  </div>
  <img src="https://source.unsplash.com/random/800x500">
</div>