I want to do 2 .hover :
first when the cursor is hover the image icons should appear on the
image
second when the cursor is hover a specific icon, (for exemple info) a
div with the informations should appear
I have nearly sucess but I have blinkin problems and when I use the two .hover
function the information popup does not show up.
here my html
{LinkOpenTag}<div class="centrage"><div class="photoDiv"><img src="{PhotoURL-500}" alt="{PhotoAlt}" />
<div class="icons">
{block:Exif}
<span class="info"><span>
<div class="exif" style="display: none; opacity: 0">
<ol class="CameraMeta">
<li>{block:Camera}Camera: {Camera}{/block:Camera}</li>
<li>{block:Aperture}Aperture: {Aperture}{/block:Aperture}</li>
<li>{block:Exposure}Exposure: {Exposure}{/block:Exposure}</li>
<li>{block:FocalLength}Focal Length: {FocalLength}{/block:FocalLength}</li>
</ol>
</div>
{/block:Exif}
</div>
</div>{LinkCloseTag}
and here my jquery
<script type="text/javascript">
$(".photoDiv img").hover(
function() {
$(this).next().css("visibility", "visible");
},
function() {
$(this).next().css("visibility", "hidden");
}
);
$("span.info").hover(
function() {
$(".exif").css("display", "block");
$(".exif").css("opacity", "1");
},
function() {
$(".exif").css("display", "none");
$(".exif").css("opacity", "0");
}
);
Thanks for your time :)
