如何使用 CSS 制作图像叠加层，以便我可以像 Facebook 那样使用铅笔图标来编辑信息？答案

【问题标题】：How can I make an image overlay using CSS so that I can have a pencil icon to edit info, like Facebook has?如何使用 CSS 制作图像叠加层，以便我可以像 Facebook 那样使用铅笔图标来编辑信息？
【发布时间】：2017-04-25 01:30:56
【问题描述】：

我正在编写一个简单的网络应用程序，其中我有一些人的照片，下面显示了一些关于他们的信息。我想在鼠标悬停时在图像上方出现一个铅笔图标，以便用户可以单击铅笔进入编辑模式。我已经拼凑了我想要的大部分内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>pencil-tooltip</title>
    <style>
      .picture {
        position: relative;
        width: -moz-max-content;
        width: -webkit-max-content;
        width: max-content;
      }
      .picture img:hover +.pencil {
        display:inline;
      }
      .pencil {
        display:none;
        position: absolute;
        top:0;
        right:0;
        margin:5px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
    </style>
  </head>
  <body>
    <div class="picture">
      <img src="https://i.stack.imgur.com/iRNEQ.png">
      <span class="pencil" onclick="console.log('hello')">
        <svg width="16px" height="16px" id="Layer_1" viewBox="0 0 32 32" version="1.1">
          <path d="M29.395,2.58C27.75,0.937,25.584,0,23.449,0c-1.801,0-3.459,0.668-4.67,1.877l-4.867,4.904  c-0.015,0.014-0.032,0.023-0.047,0.038c-0.008,0.008-0.013,0.019-0.021,0.026l0.002,0.002L3.517,17.256  c-0.476,0.473-0.821,1.062-1.013,1.705l-2.349,8.508C0.153,27.492,0,28.16,0,28.5C0,30.432,1.569,32,3.504,32  c0.385,0,1.13-0.184,1.157-0.188l8.478-2.229c0.644-0.191,1.229-0.539,1.705-1.016l15.263-15.383  C32.883,10.406,32.57,5.75,29.395,2.58z M16.014,23.795c-0.082-0.902-0.337-1.787-0.719-2.627l9.455-9.454  c0.578,1.826,0.281,3.736-0.986,5.004c-0.008,0.008-0.018,0.013-0.025,0.021l0.014,0.013l-7.728,7.79  C16.025,24.293,16.037,24.049,16.014,23.795z M14.793,20.256c-0.373-0.613-0.797-1.205-1.322-1.729  c-0.611-0.611-1.312-1.09-2.044-1.492l9.532-9.532c0.748,0.332,1.465,0.805,2.098,1.438c0.541,0.539,0.959,1.143,1.281,1.771  L14.793,20.256z M10.486,16.562c-0.926-0.373-1.896-0.586-2.868-0.599l7.703-7.762c1.179-1.15,2.896-1.481,4.587-1.062  L10.486,16.562z M4.167,29.873C4.058,29.898,3.719,29.984,3.489,30C2.667,29.99,2,29.322,2,28.5  c0.012-0.168,0.079-0.457,0.102-0.562l1.053-3.814c1.143-0.031,2.373,0.414,3.34,1.383c0.982,0.98,1.444,2.234,1.394,3.391  L4.167,29.873z M8.874,28.637c-0.024-1.342-0.57-2.738-1.672-3.838C6.16,23.756,4.796,23.154,3.436,23.1l0.996-3.607  c0.072-0.24,0.215-0.477,0.391-0.684c2.006-1.436,5.091-1.012,7.234,1.133c2.267,2.266,2.617,5.586,0.871,7.568  c-0.116,0.061-0.233,0.119-0.359,0.156L8.874,28.637z M28.691,11.772l-1.684,1.697c0-0.226,0.027-0.443,0.006-0.674  c-0.176-1.935-1.078-3.806-2.543-5.269c-1.629-1.63-3.789-2.565-5.928-2.571l1.656-1.67C21.027,2.458,22.184,2,23.449,2  c1.609,0,3.262,0.728,4.533,1.995c1.193,1.191,1.904,2.671,2.006,4.168C30.082,9.56,29.621,10.841,28.691,11.772z" fill="#333333" id="pen"/>
        </svg>
      </span>
    </div>
    <br/>
    <br/>
  </body>
</html>

我已经使用这些之前的 Stackoverflow 问题作为实现上述内容的来源：

How to make an image appear over another image when mouse hovers with css3?

Show image over another image on hover

How do I make another image appear on hover

Show image over another image on hover

我有两个问题。一：当我将鼠标悬停在铅笔图标上时，存在某种渲染问题。如果我在铅笔上移动鼠标，它会进进出出。这非常没有吸引力（我已经在四种不同的浏览器中尝试过）。第二：onclick 操作不起作用。但是，如果我删除这些代码部分，它确实有效：

.picture img:hover +.pencil {
  display:inline;
}
.pencil {
  display:none;
}

任何解决方案或建议将不胜感激。

【问题讨论】：

标签： css html hover overlay

【解决方案1】：

对于悬停和点击问题，您可以使用

.picture:hover > .pencil {
    display: inline;
}

【讨论】：

哇！ CSS子选择器，完美运行，谢谢！ -- w3.org/TR/CSS2/selector.html#child-selectors

【解决方案2】：

我添加了一个叠加层并将您的铅笔居中，如果这是您正在寻找的，应该可以工作。将铅笔上的 css 更改为：

    top:calc(50% - 10px);
    right:calc(50% - 20px);

还在 html 中添加了叠加层：

<div class="overlay"></div>

https://jsfiddle.net/2p17yhxz/

【讨论】：