Hola muy buenas compañeros!
Os explico con imágenes y código mi problema y duda.
Tengo una imagen como esta, en la que quiero que cada vez que pasas el mouse por encima de las cruces se habrá una descripción y un titulo. Hasta aquí bien, ya que si pasas por encima aparece, y en el botón de cerrar de el div que aparece se cierra, pero hay fallos...
Fallos como que al pasar el mouse hay que pasarle dos veces por encima para que aparezca, cosa que quiero que sea automática. Os dejo mi código (los div se crean con jQuery, de ahí que no ponga código html):
JS
//grafico vivienda pasiva
$(document).ready(cargaPagina);
function Info(id, titulos, descripcion) {
this.id = id;
this.titulos = titulos;
this.descripcion = descripcion;
};
var miInfo = new Info();
function cargaPagina() {
var opciones = {
url: "./js/informacion.php",
method: "get",
dataType: "json"
};
$.ajax(opciones)
.done(cargaExito)
.fail(cargaError);
function cargaExito(infos) {
for (var i = 0; i < infos.length; i++) {
//imagen de la cruz hover
var $imgCruz = $('<img>');
$imgCruz.attr('src', './imagenes/mas.png');
$imgCruz.attr('class', 'c' + i);
$imgCruz.addClass('mas');
$imgCruz.attr('id', i);
$imgCruz.on("mouseover", muestraInfo);
$('#vp_grafico').append($imgCruz);
}
function muestraInfo() {
//eliminamos contenido si ya existe, si la página esta vacía, lo añadimos
if ($('#informacion-display').length !== 0) {
$('#informacion-display').remove();
} else {
var thisID = this.id;
var id = parseInt(thisID); //id
var $divInfo = $('<div></div>');
$divInfo.attr('id', 'informacion-display');
$divInfo.attr('class', 'visible');
$divInfo.addClass('info' + id);
var $cerrar = $('<img>');
$cerrar.attr('id', 'boton-cerrar');
$cerrar.on('click', quitarInfo);
$cerrar.attr('src', './imagenes/cerrar.png');
$divInfo.append($cerrar);
var $t = $('<h1></h1>');
$t.html(infos[id].titulos);
$divInfo.append($t);
var $hr = $('<hr>');
$divInfo.append($hr);
console.log(infos[id].descripciones);
var $d = $('<p></p>');
$d.html(infos[id].descripciones);
$divInfo.append($d);
$('#vp_grafico').append($divInfo);
}
}
function quitarInfo() {
if ($('#informacion-display').hasClass('visible')) {
$('#informacion-display').addClass('oculto');
$('#informacion-display').removeClass('visible');
}
}
}
function cargaError(xhr, estado, error) {
console.log("Error al cargar: " + error);
}
}
Espero vuestra respuesta y admito sugerencias para hacer lo que es el proyecto mejor, un saludo!