2

Como dice el título quiero ocultar un link luego de hacer click sobre el.

Con lo siguiente:

.link:hover > a {
    display:inline;
}

.link:active > a{
    display:none;
}

Y el link que quiero ocultar lo tengo definido así

<div class="link">
    <a onclick="mostrar('div')"></a>
</div>

Con esto consigo ocultar el link, pero no me ejecuta la función del evento onClick. Y si dentro de la función lo intento ocultar, luego cuando paso el mouse sobre el link no me lo muestra porque queda con la propiedad definida por javascript

¿Estoy haciendo algo mal?

(Si solo espero que el mouse se vaya del elemento, en un celular, se ve feo, porque lo que se muestra tapa el contenido)

3
  • que tipo de contenido estarías mostrando? si es sólo hacer visible un div podés jugar con un radio button/checkbox, un label y selectores hermanos es.stackoverflow.com/a/187565/81450 Commented el 18 oct. 2019 a las 18:35
  • dentro de la función, además de mostrar el div, se envían datos al servidor, por lo que es necesario que se ejecute la función que muestra el div.
    – Andres
    Commented el 18 oct. 2019 a las 18:38
  • el display none saca el link del dom, una opción es ocultarlo dentro de la función ( y volverlo a mostrar si falla al ejax por ejemplo ) Commented el 18 oct. 2019 a las 18:41

3 respuestas 3

1

Lo que deseas es extraño y creo que si se viera tu implementación real se podría buscar soluciones alternativas pero siguiendo las pautas que has puesto en tu pregunta se me ocurre una solución alternativa.

La función mostrar no se ejecuta porque para que el evento click se dispare, necesitas hacer mousedown y mouseup sobre el elemento y en el momento en que haces mouseup el mismo está oculto, provocando que el evento click no se dispare.

Una solución alternativa es simular un evento de click: Si capturas las coordenadas del mouse en el momento que haces mousedown en el elemento, podrías chequear si al hacer mouseup en el documento (o en un elemento padre que no esté oculto) las coordenadas de este último evento están cerca de las coordenadas de origen, en caso de que lo estén sabes que se trata de un click, ejecutas la acción que deseas y reseteas las variables guardadas para evitar que el evento se lance múltiples veces. Observa el siguiente snippet:

He añadido los eventos usando addEventListener en vez de usar los atributos HTML porque siempre prefiero tener estos códigos separados, pero si prefieres usar los atributos solo tienes que adaptar el código:

var a = document.querySelector('.link a');

var limite = 10;
var mouseX;
var mouseY;

// Al presionar en el enlace declaro las variables mouseX y mouseY
a.addEventListener('mousedown', function (e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
});

// Cuando se suelte el mouse en el documento
// Chequear si las variables mouseX y mouseY existen
// y chequear si son cercanas a las coordenadas del nuevo evento
// En caso positivo ejecutar la función
document.addEventListener('mouseup', function (e) {
  if (
    mouseX &&
    mouseY &&
    Math.abs(e.pageX - mouseX) < limite &&
    Math.abs(e.pageY - mouseY) < limite
  ) {
    console.log("ejecutar mostrar");
  }
  // Resetear las variables
  mouseX = null;
  mouseY = null;
});
.link:hover > a {
  display: inline;
}

.link:active > a {
  display: none;
}
<div class="link">
  <a>enlace</a>
</div>

0

Existe la pseudo clase :visited, pero solo se pueden cambiar algunos atributos, display no es uno de ellos, pero si color:

a:visited {
  color: white;/* <-- El color del background */
}
<a href="#">link</a>

Una vez que hagamos click, siempre va a aplicar :visited.

2
  • no me sirve porque el fondo no es blanco, además necesito que realmente no se vea, porque forma parte de un menú que cuando se pasa por arriba se despliega y cuando se hace click debería desaparecer
    – Andres
    Commented el 18 oct. 2019 a las 19:25
  • 1
    Una cosa es que no se vea, y otra es que desaparezca. Para que no se vea realmente (pero sigue existiendo y ocupando lugar) deberías poner el mismo color que tiene tu fondo, en este caso específico es blanco. No creo que se pueda hacer un display none con una pseudoclase quiza se pueda hacer algo con una transition.
    – Emeeus
    Commented el 18 oct. 2019 a las 19:35
0

Al llamar la función podés indicarle quién fue el que la llamó y sólo si el proceso tuvo éxito ocultar el enviador y mostrar el div. Por ejemplo:

var mostrar = function(elemento, enviador) {
  var contenedor = document.querySelector('body');
  contenedor.classList.add('cargando');
  fetch('https://baconipsum.com/api/?type=all-meat&paras=2&start-with-lorem=1')
    .then(function(response) {
      return response.text();
    })
    .then(function(body) {
      var eldiv = document.querySelector(elemento);
      eldiv.innerHTML = body;
      contenedor.classList.remove('cargando');
      enviador.style.display = 'none';
      eldiv.style.display = 'block';
    });
};
.cargando {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 class%3D%22lds-dual-ring%22 preserveAspectRatio%3D%22xMidYMid%22 style%3D%22background%3A0 0%22 viewBox%3D%220 0 100 100%22%3E%3Ccircle cx%3D%2250%22 cy%3D%2250%22 r%3D%2240%22 fill%3D%22none%22 stroke%3D%22%230DD%22 stroke-dasharray%3D%2262.832 62.832%22 stroke-linecap%3D%22round%22 stroke-width%3D%224%22 transform%3D%22rotate%28126 50 50%29%22%3E%3CanimateTransform attributeName%3D%22transform%22 begin%3D%220s%22 calcMode%3D%22linear%22 dur%3D%221s%22 keyTimes%3D%220%3B1%22 repeatCount%3D%22indefinite%22 type%3D%22rotate%22 values%3D%220 50 50%3B360 50 50%22%2F%3E%3C%2Fcircle%3E%3C%2Fsvg%3E') !important;
  background-color: #fafafa;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10%;
  transition: opacity .3s ease-in;
  opacity: 0.5;
}

#eldiv {
  display: none;
}
<div class="link">
  <a onclick="mostrar('#eldiv', this)">mostrar</a>
</div>
<div id=eldiv></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.