javascript onmouseover / onmouseout restano nel contenuto precedente fino a quando si passa con il mouse su / avvia il successivo: javascript, html, onmouseover, onmouseout

Sono un principiante di javascript. Per questo progetto non possiamo usare jQuery qui. Mi piace avere 4 celle rettangolari in basso a destra come miniature e si attivano per mostrare immagini diverse al passaggio del mouse rispettivamente.

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

Mi piace migliorare perché queste cellule si affidano ora onmouseout che spegne il link <section> quindi può ricaricare il prossimo <section>. Se sposto il mouse dalle celle mostrerà una pagina vuota.

Come scrivo il javascript per farlo rimanere al corrente <section> e carica solo l'altro <section> quando si posiziona il mouse sulle altre celle?

Grazie in anticipo

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

risposte:

Analizziamo ciò che vuoi fare con una semplice frase:

"Quando mostro un altro oggetto, voglio nascondere altri elementi che possono o non possono essere mostrati."

Quindi, lasciamo rimuovere onmouseout che nasconde gli elementi e impone uno stato di "reset" che assicura che tutti gli oggetti siano nascosti ogni volta che mostriamo un oggetto dal nostro onmouseover.

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

Ecco un violino funzionante: http://jsfiddle.net/rgthree/63L72trx/12/