Mouseover and mouseout event in JavaScript

Navigation
2

I'm doing a small test page in html, js, css and I have some pictures that when I pass the mouse I want the button to be added to erase each image and when it is not on the image disappears, I managed to make the event clear with mouseover and mouseout the problem is that when I pass over the image and the button appears to erase it, the image is disconnected from the others. As an achievement, they do not move and only the button appears. 

function crearAlbum(imge, nomb, ide) {
  id++;
  var divColumnas = document.createElement('div');
  divColumnas.className = "columnas";
  var divContenido = document.createElement('div');
  divContenido.className = "contenido";
  divContenido.id = ide;
  var divBotton = document.createElement('div');
  divBotton.className = 'divBorrar';

  var img = document.createElement('img');
  img.src = imge;
  var p = document.createElement('p');
  p.textContent = nomb;
  var buttonBorrar = document.createElement('button');
  buttonBorrar.className = 'buttonBorrar';
  buttonBorrar.textContent = "X";
  buttonBorrar.id = id;
  buttonBorrar.addEventListener('click', borrarFoto);
  buttonBorrar.style.display = 'none';


  divContenido.addEventListener('mouseover', function() {
    buttonBorrar.style.display = 'block';
  });
  divContenido.addEventListener('mouseout', function() {
    buttonBorrar.style.display = 'none';
  });

  divBotton.appendChild(buttonBorrar);
  divContenido.appendChild(img);
  divContenido.appendChild(p);
  divColumnas.appendChild(divContenido);
  divColumnas.appendChild(divBotton);
  contenedorFotos.appendChild(divColumnas);

  $('.contenido').click(function() {

    console.log("vistaAlbums");

    var id = $(this).attr("id");

    console.log(id);

    window.open("albums.html?" + models + id, "_self", true);
  });
}
//Mostrar texto de imagen cargada
$('#file_1').on('change', function() {
  $('#inputval').text($(this).val());
});

var fileButton = document.getElementById('file_1');

fileButton.addEventListener('change', function(e) {

  //Obtener archivo
  file = e.target.files[0];



});




//function cerrarFormulario() {
var cerrar = $('#cerrar').click(function() {

  var fade = document.getElementById('fade');
  fade.style.display = 'none';


});
//} //cerrarFormulario
.divBorrar {
  .buttonBorrar {
    width: 13px;
    height: 15px;
    position: relative;
    left: 198px;
    bottom: 259px;
    font-size: 8px;
    cursor: pointer;
  }
}
    
asked by Packvt 28.04.2018 в 00:05
source

2 answers

0

Most likely, your problem is css. My recommendation is that you try to do the following: Have all the buttons appear on the images without the event. Set things up with HTML and CSS so that they appear above (try with z-index, float or display inline, there are several ways to put things one above the other). And once they appear graphically as you want, just there you put the mouseover event, and try.

    
answered by 28.04.2018 / 04:30
source
1

If you try to use visible or hidden property for each photo.

Example: 

<div id="contenedor principal">


<div id="foto1" on mouseover="funcionMostrarBoton(1)" onmouseout="funcionOcultarBoton(1)" >
<div id="botonFoto1"></div>

</div>

<div id="foto1" on mouseover="funcionMostrarBoton(2)" onmouseout="funcionOcultarBoton(2)" >
<div id="botonFoto2"></div>
</div>

<div id="foto1" on mouseover="funcionMostrarBoton(3)" onmouseout="funcionOcultarBoton(3)" >
<div id="botonFoto3"></div>
</div>

</div>


function funcionMostrarBoton(varIdBoton){
document.getElementById('botonFoto'+varIdBoton).style.visibility='visible';
}

function funcionOcultarBoton(varIdBoton){
document.getElementById('botonFoto'+varIdBoton).style.visibility='hidden';
}

You tell me how it went

    
answered by 28.04.2018 в 00:21
How to remove specific elements within a matrix in Python? How to validate a texbox that only lets me enter numbers up to 100