Mouseover effect and click jQuery

Hello very good companions!

I explain to you with images and code my problem and doubt.

I have an image like this, in which I want that every time you pass the mouse over the crosses there will be a description and a title. So far, well, if you pass over it appears, and the closing button of the div that appears closes, but there are failures ...

Faults like that when passing the mouse you have to pass it twice over to appear, which I want to be automatic. I leave my code (div are created with jQuery, hence do not put html code):

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);
  }
}

I await your response and I admit suggestions to do what is the best project, greetings!