Я пишу простое веб-приложение, в котором у меня есть фотографии людей с некоторой информацией о них. Я хочу, чтобы при наведении мыши на изображение над значком карандаша появлялся значок, чтобы пользователь мог щелкнуть карандашом, чтобы войти в режим редактирования. Я собрал большую часть того, что я хочу:

<!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 в качестве источников для реализации выше:

Как сделать так, чтобы изображение появлялось поверх другого изображения при наведении курсора мыши на css3?

Показывать изображение поверх другого изображения при наведении

Как заставить другое изображение появляться при наведении

Показывать изображение поверх другого изображения при наведении

У меня две проблемы. Первый: возникает некоторая проблема с рендерингом при наведении курсора на иконку карандаша. Если я наведу указатель мыши на карандаш, он начнет мерцать. Это очень непривлекательно (я пробовал в четырех разных браузерах). Второе: действие onclick не работает. Это работает, однако, если я удаляю эти части кода:

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

Любые решения или предложения будут оценены.

0
Purplejacket 25 Апр 2017 в 04:30

2 ответа

Лучший ответ

Для всплытия и щелчка вы можете использовать

.picture:hover > .pencil {
    display: inline;
}
2
blecaf 25 Апр 2017 в 01:58

Я добавил оверлей и отцентрировал ваш карандаш, должен работать, если это то, что вы ищете. изменил CSS на карандаш:

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

Также добавили оверлей в HTML:

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

https://jsfiddle.net/2p17yhxz/

1
philr 25 Апр 2017 в 01:56