Problem using OnHover events

Question

Problem using OnHover events

Navigation

#1 by (0 votes)

1

I want to show 3 images in order and the action does not end. I guess I need a loop but I do not clarify with the loops. The intention is to make these actions in JS not have an end, that is, when returning to position the mouse on the image punt2 will show everything again. I think the solution would be to add a parameter to the two functions but I do not know how to perform this action.

function pasaConHover() {
  document.getElementById('punt0').style.display = "none";
  document.getElementById('punt1').style.display = "block";
}

function pasaConHover1() {
  document.getElementById('punt2').style.display = "block";
  document.getElementById('punt0').style.display = "none";
  document.getElementById('punt1').style.display = "none";

}
/*//Aquí consigo CASI lo que pretendía pero me muestra la imágen punt1 en vez de la punt0*/
function dVuelta () {
	  document.getElementById('punt2').style.display="none";
    document.getElementById('punt0').style.display="block";
    document.getElementById('punt1').style.display="none"; 
}

<div class="semantica">
  <a target="_blank" href="#">
    <div class="montar">
      <img id="punt0" onmouseover="pasaConHover();" src="http://placehold.it/100?text=punt0" alt="imágen/enlace 0">
      <img id="punt1" onmouseout="pasaConHover1();" src="http://placehold.it/100?text=punt1" alt="imágen/enlace 1">
      <img onmouseover="dVuelta();" id="punt2" src="http://placehold.it/100?text=punt2" alt="imágen/enlace 2">
    </div>
  </a>
</div>

javascript html

asked by jBaton 05.08.2018 в 16:30

source

1 answer

How to install laravel 5.6 in a subdirectory? [closed] The JButtons do not work

score 0 · Accepted Answer

It would be to hide them from other elements that are not in hover, my code shows a way to do it

let clases = document.getElementsByClassName("figura");
for (let i = 0; i < clases.length; i++) {
  clases[i].addEventListener('mouseover', dentro);
  clases[i].addEventListener('mouseout', fuera);
}

function dentro(evt) {
  var ele = evt.target;
  for (let i = 0; i < clases.length; i++) {
    if (clases[i].id !== ele.id) {
      clases[i].classList.add("clase1");
    }
  }
}

function fuera(evt) {
  var ele = evt.target;
  for (let i = 0; i < clases.length; i++) {
    clases[i].classList.remove("clase1");
    clases[i].classList.add("figura");
  }
}

.clase1 {
  opacity: 0.2;
}

.figura {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
  display: inline-block;
}

<div id="conjunto">
  <div id="punt1" class="figura">
  </div>
  <div id="punt2" class="figura">
  </div>
  <div id="punt3" class="figura">
  </div>
</div>