JQUERY - comment Deux éléments - IMG - DIV lorsque survoler IMG afficher/masquer le DIV - ajouté avec hover cacher/montrer sur img déjà

Question

Im très nouveau à la merveille qui est jquery.

et je me dis que juste comment faire mes boutons img afficher/cacher avec une différence d'opacité (en tant que telle)

<script type="text/javascript"> 
<![CDATA[ 
$(".ExcommKnap").mouseover(function() { $(this).stop().fadeTo('fast', 0.5, function(){}) }); 
$(".ExcommKnap").mouseout(function() { $(this).stop().fadeTo('fast', 1.0, function(){}) }); 
]]> 
</script> 

ce qui est bon et tout. mais j'ai aussi besoin de faire le bouton en survolant le texte affiché juste au-dessus de celui qui est spécifique à ce bouton.

J'ai fait ces éléments ici qui sont bouclés dans un pour chacun.

<div style="top:10px; width:755px;text-align:right; position:absolute; "> 
    <div id="Page-{@id}" class="headlinebox"> 
     <xsl:value-of select="@nodeName"/> 
    </div> 
</div> 
<a href="{umbraco.library:NiceUrl(@id)}"> 
    <img class="ExcommKnap" src="{$media/data[@alias='umbracoFile']}" />     
</a> 

J'ai besoin de faire apparaître le texte lorsque survolé son bouton. donc j'ai l'id = "page - {@ id}" bouclé le long et besoin d'obtenir cette place dans le code jquery je présume. donc quand je survole un img class = "ExcommKnap" il rend le texte correct visible.

Mais j'ai besoin de la div id = "page- {id}" pour être invisible pour commencer avec pageload et ensuite visible lorsque son bouton est survolé. quelqu'un peut-il aider?

Answer 1

C'est probablement pas la façon la plus élégante pour sélectionner la div cible, mais il devrait fonctionner:

$(".ExcommKnap").mouseover(function() { $(this).stop().fadeTo('fast', 0.5, function(){ 
     $(this).parent().prev('div').children().eq(0).show(); 
    }) 
}); 
$(".ExcommKnap").mouseout(function() { $(this).stop().fadeTo('fast', 1.0, function(){ 
     $(this).parent().prev('div').children().eq(0).hide(); 
}) }); 

Une autre option est de donner et id attribut à chaque img qui contient également { @id}, alors vous pouvez sélectionner la div cible directement par id.

Et si vous voulez qu'ils soient tous invisibles lors du chargement initial de la page, réglez simplement style = "display: none" en HTML.

Answer 2

Comme je ne suis pas familier avec Umbraco et de votre structure, je vais essayer sur à illustrer cet exemple:

$(document).ready(function() { 
    // this will hide the div when the DOM is ready 
    $('#page-1').hide(); 

    $(".ExcommKnap").mouseover(function() { 
     $(this).fadeTo('fast', 0.5, function() { 
      url= $(this).parent().attr('href').split('/'); 
      $('#page'+url[url.length-1]).hide(); 
     });   
    }).mouseout(function() { 
     $(this).fadeTo('fast', 1.0, function() { 
      url= $(this).parent().attr('href').split('/'); 
      $('#page'+url[url.length-1]).hide();    
     }); 
    }); 
}); 

Ce code cacher la div lorsque le DOM est prêt. Lorsque vous survolez votre image, elle obtient l'attribut href de son parent et obtient l'identifiant, puis l'affiche/le cache. En supposant que le lien utilisé, par ex. quelque chose/quelque chose/1 (comme je l'ai utilisé ici) etc, dans le href se terminerait avec le même id, comme la page. Sinon, vous pouvez utiliser une autre méthode, comme Botondus fourni. Aussi, si vous avez plus, que je suppose que vous avez, aux balises div avec un certain nombre en eux, vous pouvez les cacher comme ça, si vous ajoutez une classe à leurs parents div

$('.parent_div div').each(function { 
    $(this).hide(); 
}); 

Il y aurait une deuxième option, comme pour cacher la div, avec l'utilisation de window.onload

window.onload = function() { 
    // code to hide the div 
}