J'écris une application web simple dans laquelle j'ai des photos de personnes avec des informations à leur sujet affichées ci-dessous. Je voudrais avoir une icône de crayon au-dessus de l'image sur mouseover afin que l'utilisateur puisse cliquer sur le crayon pour passer en mode d'édition. Je l'ai rassemblé plus de ce que je veux:Comment puis-je faire une superposition d'image en utilisant CSS afin que je puisse avoir une icône de crayon pour éditer des informations, comme Facebook a?
<!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>Je l'ai utilisé ces questions Stackoverflow avant que les sources pour mettre en œuvre ce qui précède:
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
J'ai deux problèmes. Un: Il y a une sorte de problème de rendu lorsque je souris sur l'icône du crayon. Si je déplace la souris sur le crayon, elle scintille. C'est très peu attrayant (je l'ai essayé dans quatre navigateurs différents). Deuxièmement: l'action onclick ne fonctionne pas. Il ne fonctionne, cependant, si je retire ces parties du code:
.picture img:hover +.pencil {
display:inline;
}
.pencil {
display:none;
}Toutes les solutions ou suggestions seraient appréciées.
Wow! Le sélecteur d'enfant CSS, ça marche parfaitement, merci! - https://www.w3.org/TR/CSS2/selector.html#child-selectors – Purplejacket