zeigen Absatz auf Bildmouseover

Question

Ich habe Bilder in divs und ich möchte Absätze über mouseover auf ihnen erscheinen, mit jQuery. Die Absätze sind zunächst versteckt.

Ich habe Folgendes versucht, kann aber den Absatz nicht erscheinen lassen, nur wenn ich über ein Bild mouseover, nur über dieses Bild.

HTML:

<div id="photos"> 

    <div class="test"> 
     <img src="http://www.blset.com/img/300x200/biostat300200.jpg" /> 
     <p class="desc">Test 1</p> 
    </div> 

    <div class="test"> 
     <img src="http://www.blset.com/img/300x200/barometre1300200.jpg" /> 
     <p class="desc">Test 2</p> 
    </div> 
</div> 

CSS:

#photos {position:relative;width:100%;height:100%;background:#ccc;} 

#photos img {float:left;height:120px;} 

#photos p {display:none; position:absolute;top:0;left:0;} 

jQuery:

$(".test img").hover(function() { 

     $(".test p").fadeIn(200); 
    }, function() { 

     $(".test p").fadeOut(200); 

    }); 

jsFiddle: http://jsfiddle.net/m7zFb/13/

Answer 1

Try this:

$(".test img").hover(function(e) { 
    $(e.target).next().fadeIn(200); 
}, function (e) { 
    $(e.target).next().fadeOut(200); 
}); 

mit folgendem CSS:

.test { float: left;position: relative; } 

#photos {position:relative;} 

#photos img {height:120px;} 

#photos p {display:none; position:absolute;top:0;left:;} 

jsFiddle:

• http://jsfiddle.net/m7zFb/15/

Answer 2

Das sieht aus wie Sie ein Problem, weil Blockelemente wie P haben nicht enthalten bekommen in DIV-Elementen, wenn auf diese Weise eingerichtet. Außerdem haben Sie Ihre P-Elemente für die absolute Positionierung festgelegt, aber die Positionierung der enthaltenden Elemente nicht definiert. Ihr P wird also relativ zum Ansichtsfenster positioniert.

Persönlich, wenn Sie wollen, dass der Text über dem Bild sein und es ein bisschen einfacher machen: Ich würde den Platz die Bilder als Hintergrund für die Divs machen, so dass background-image: url ('imagepath') ; Dann können Sie Ihren Text ohne P-Element-Tags direkt dort einfügen, es sei denn, Sie benötigen sie wirklich, da Sie in der CSS die Textpositionierung für das DIV selbst festlegen können, ohne das IMG-Element zu beeinflussen.

Wenn Sie weitere Informationen über die Positionierung und Floating-und Block-Elemente möchten, ist dies ein gutes Tutorial zum Thema: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/. Denken Sie daran, immer die Breite und Höhe einzustellen, wenn Sie Elemente schweben lassen.