I'm writing a simple web app in which I have pictures of people with some information about them displayed underneath. I would like to have a pencil icon appear above the image on mouseover so the user can click the pencil to enter edit mode. I've pieced together most of what I want:
<!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>I've used these prior Stackoverflow questions as sources to implement the above:
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
I have two problems. One: There is some kind of rendering issue when I mouse over the pencil icon. If I move the mouse around on top of the pencil it flickers in and out. This is very unattractive (I've tried it in four different browsers). Second: the onclick action doesn't work. It does work, however, if I remove these parts of the code:
.picture img:hover +.pencil {
display:inline;
}
.pencil {
display:none;
}Any solutions or suggestions would be appreciated.
