javascript onmouseover/onmouseout rester dans le contenu précédent jusqu'à hover/déclencher le suivant

Question

Je suis un débutant de javascript. Pour ce projet, nous ne pouvons pas utiliser jQuery ici. J'aime avoir des cellules rectangulaires 4 dans la partie inférieure droite comme des vignettes et elles vont se déclencher pour montrer des images différentes en stationnaire respectivement.

<div id="resistorContent"> 
      <section id="resistorDetail1" class="1stdetailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" alt=""></section> 
      <section id="resistorDetail2" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" alt=""></section> 
      <section id="resistorDetail3" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" alt=""></section> 
      <section id="resistorDetail4" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" alt=""></section> 

      <span class="closeButton"><a id="close" onclick="hideContent('resistorContent')">X</a></span> 

      <ul> 
       <li onmouseover="showDetailContent('resistorDetail1')" onmouseout="hideDetailContent('resistorDetail1')"></li> 
       <li onmouseover="showDetailContent('resistorDetail2')" onmouseout="hideDetailContent('resistorDetail2')"></li> 
       <li onmouseover="showDetailContent('resistorDetail3')" onmouseout="hideDetailContent('resistorDetail3')"></li> 
       <li onmouseover="showDetailContent('resistorDetail4')" onmouseout="hideDetailContent('resistorDetail4')"></li> 
      </ul> 
     </div> 
</section> 


<script type="text/javascript"> 
     function showDetailContent(target) { 
      document.getElementById(target).style.display = "block"; 
     } 

     function hideDetailContent(target){ 
      document.getElementById(target).style.display = "none"; 
     } 
    </script> 

J'aime faire une certaine amélioration, car ces cellules sont confiance sur onmouseout qui désactiver le lien <section> il peut donc recharger la prochaine <section>. Si je déplace la souris loin des cellules, elle affichera une page blanche.

Comment est-ce que j'écris le javascript pour qu'il reste au <section> courant et charge seulement l'autre <section> quand hover sur les autres cellules?

Merci à l'avance

http://jsfiddle.net/63L72trx/10/

Answer 1

Brisons ce que vous voulez faire à une simple phrase:

« Quand je montre un autre élément, je veux cacher d'autres éléments qui peuvent ou peut ne pas être montré. "

Donc, supprimons le onmouseout qui cache les éléments et forcer un état "réinitialisation" qui assure que tous les éléments sont cachés chaque fois que nous montrons un élément de notre onmouseover.

<div id="resistorContent"> 
    <section id="resistorDetail1" class="1stdetailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" alt=""></section> 
    <section id="resistorDetail2" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" alt=""></section> 
    <section id="resistorDetail3" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" alt=""></section> 
    <section id="resistorDetail4" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" alt=""></section> 
    <span class="closeButton"><a id="close" onclick="hideContent('resistorContent')">X</a></span> 
    <ul> 
     <li onmouseover="showDetailContent('resistorDetail1')"></li> 
     <li onmouseover="showDetailContent('resistorDetail2')"></li> 
     <li onmouseover="showDetailContent('resistorDetail3')"></li> 
     <li onmouseover="showDetailContent('resistorDetail4')"></li> 
    </ul> 
    </div> 
</section> 

<script type="text/javascript"> 
    var children = document.querySelectorAll('#resistorContent > section[id]'); 
    function showDetailContent(target) { 
    // Simply loop over our children and ensure they are hidden: 
    for (var i = 0, child; child = children[i]; i++) { 
     child.style.display = 'none'; 
    } 
    // Now, show our child we want to show 
    document.getElementById(target).style.display = 'block'; 
    } 
</script> 

est ici un violon de travail: http://jsfiddle.net/rgthree/63L72trx/12/