Hover image - afficher div sur

En survol, je veux un lien apparaît en haut à droite de l'image. Tout comme sur votre photo de profil sur Facebook, où il est dit "Changer l'image".Hover image - afficher div sur

J'ai essayé de le faire fonctionner avec un peu de jquery mais je n'ai pas eu de chance, car il ne va pas à droite de l'image. Les images vont être de tailles différentes car ce sont des images de profil. Donc quelle que soit la taille, il faut 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!

Source

2010-11-29 ryryan

Le problème est-il que vous le souhaitez dans le coin supérieur droit ou à côté? –

Ceci est la façon dont je l'ai fait: CSS:

.imgHover { 
    display: inline; 
    position: relative; 
} 
.imgHover .hover { 
    display: none; 
    position: absolute; 
    right:0; 
    z-index: 2; 
}

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>

JQuery:

$(function() { 
    $(".imgHover").hover(
     function() { 
      $(this).children("img").fadeTo(200, 0.85).end().children(".hover").show(); 
     }, 
     function() { 
      $(this).children("img").fadeTo(200, 1).end().children(".hover").hide(); 
     }); 
});

Test cette sur jsfiddle.

Source

2010-11-29 20:50:20 ryryan

faire votre image un fond pour div avec positionnement relatif et ajoutez div intérieure à avec le contenu de superposition le style avec display: none

puis imgdiv: hover innerdiv {display: block} fera l'astuce

Source

2010-11-29 18:32:32

Essayez

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <style> 
    .imgHover { 
     display: inline; 
     position: relative; 
    } 
    .imgHover .hover { 
     display: none; 
     position: absolute; 
     right: 5px; 
     top: 5px; 
     z-index: 2; 
    } 
    </style> 
</head> 

<body> <script> $(function() { $(".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(); }); }); </script> 

<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> 

</body> </html>

Source

2010-11-29 18:36:44 simshaun

Merci, mais le lien s'affiche en bas de l'image. :/ – ryryan

Vous avez modifié quelque chose ou n'avez pas fourni de code qui le modifie. Si vous exécutez mon exemple autonome, vous verrez que cela fonctionne comme prévu (modifier le lien en haut à droite de l'image). – simshaun

Merci pour votre aide, mais cela n'a pas fonctionné. J'ai réussi à le faire à la fin – ryryan

Vous devez position absolue sur le lien dans un conteneur qui a une position différente de celle du flux normal. Dans cet exemple j'utilise relatif pour cela sur le conteneur. Essayez ceci:

HTML

<div class="imgHover"> 
    <div class="imgContainer"> 
    <a href="http://google.com">Edit</a> 
    <img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="" /> 
    </div> 
</div>

CSS

.imgHover { float: left; } 
.imgContainer { position: relative; } 
.imgContainer a { display: block; position: absolute; top: 0; right: 0; background: Green;}

Source

2010-11-29 18:37:16 Bazzz

N'a pas eu de chance avec cela non plus. :( – ryryan

Puis-je demander pourquoi? Peut-être que je suis mal compris votre exigence, mais si je regarde ici http: // jsfiddle.net/C4LSz/I voir clairement le lien Modifier avec fond vert dans le coin en haut à droite de l'image. – Bazzz

Oui, désolé c'était ma faute, je n'ai eu aucune chance de l'utiliser avec jquery en le faisant apparaître si vous passez la souris sur l'image. Merci quand même! :) – ryryan

Si le imgHover est fait pour correspondre à son contenu, il devrait juste avoir position:relative et la classe de vol stationnaire ont position:absolute et top:0;right:0

Exemple à http://www.jsfiddle.net/FvBqA/

Source

2010-11-29 18:39:08

N'est-ce pas la même chose que ma réponse? – Bazzz

@Bazzz, ou est-ce la même chose que la mienne? : p Nous devons avoir posté à peu près au même moment .. –

Si vous cliquez sur le "plus ancien" onglet, vous pouvez voir que le mien est «juste» au-dessus de la vôtre, donc légèrement plus vieux, mais en effet nous avons posté à la même heure. Disons que les «grands esprits se ressemblent» et publient en même temps :) – Bazzz

Hover image - afficher div sur

Répondre

Questions connexes