Survolez l'image - écran div dessus
Sur le vol stationnaire, je veux un lien apparent en haut à droite de l'image. Tout comme sur votre photo de profil sur Facebook, où il est dit "Changer l'Image".
J'ai essayé de le faire fonctionner avec un peu de jquery, mais pas eu de chance, qu'elle n'est pas t la droite de l'image. Les images vont être de tailles différentes car elles sont les images de profil. Donc quelle que soit la taille, il a besoin pour rester en haut à droite de l'image.
JQuery:
$(".imgHover").hover(function() {
$(this).children("img").fadeTo(200, 0.25)
.end().children(".hover").show();
}, function() {
$(this).children("img").fadeTo(200, 1)
.end().children(".hover").hide();
});
HTML:
<div class="imgHover">
<div class="hover"><a href="htpp://google.com">Edit</a></div>
<img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="" />
</div>
CSS:
.imgHover .hover {
display: none;
position:absolute;
z-index: 2;
}
Merci!
C'est la question que vous voulez dans le coin supérieur droit, ou à côté d'elle complètement?
OriginalL'auteur ryryan | 2010-11-29
Vous devez vous connecter pour publier un commentaire.
C'est la façon dont je l'ai fait:
CSS:
HTML:
JQuery:
Tester sur jsfiddle.
OriginalL'auteur ryryan
Essayer
Vous avez changé quelque chose ou de ne pas fournir un code qui est en train de changer. Si vous exécutez mon exemple, stand-alone, vous verrez qu'il fonctionne comme prévu (lien modifier en haut à droite de l'image).
Merci pour votre aide, mais il ne fonctionne pas. J'ai réussi à le faire à la fin
OriginalL'auteur simshaun
Si le imgHover est fait pour correspondre à son contenu, alors il suffit d'avoir
position:relative
et le hover de classe ontposition:absolute
ettop:0;right:0
Exemple à http://www.jsfiddle.net/FvBqA/
ou le vôtre est le même que le mien ? :p nous devons avoir posté à peu près en même temps..
Si vous cliquez sur le "plus vieux" onglet, vous pouvez voir que le mien est "juste" au-dessus de la vôtre, donc un peu plus âgés, mais en effet, nous avons posté en même temps. Disons que "les grands esprits se rencontrent" et de poster en même temps 🙂
ses un accord @Bazzz 🙂 (je sais que vous avez posté en premier.. était juste plaisanter)
Merci pour votre aide, mais il ne fonctionne pas. J'ai réussi à le faire à la fin
OriginalL'auteur Gabriele Petrioli
faire de votre image un fond pour la div avec le positionnement relatif
et d'ajouter intérieure div avec la superposition de contenu
style avec display:none
alors
imgdiv:hover innerdiv{display:block}
fera l'affaire
OriginalL'auteur Alexander Taran
Vous avez besoin de la position absolue le lien dans un conteneur qui a une position différente de la normale de l'écoulement. Dans cet exemple, j'utilise un membre de leur famille que sur le contenant. Essayez ceci:
HTML
CSS
Puis-je vous demander pourquoi? Peut-être que je ne suis malentendu votre exigence, mais si je regarde ici jsfiddle.net/C4LSz je vois clairement le lien Modifier avec un fond vert dans le coin supérieur droit de l'image.
Oui, désolé, c'était de ma faute, je n'avais aucune chance de l'utiliser avec jquery faisant afficher si vous passez ver l'image. Merci quand même! 🙂
Ah je vois, c'est parce que j'ai trouvé votre question par la recherche de questions sans réponse avec le tag "css", c'est pourquoi j'ai pensé que votre problème a été css liées. 🙂 Je vois maintenant que la première balise que vous avez utilisé est jquery.
OriginalL'auteur Bazzz