1

Tengo una tabla donde tengo sus celdas agrupadas por clases. Estoy intentando que al pasar el ratón por encima del texto de la celda muestre ese texto más un enlace.Tiene que ser con CSS.

¿Como puedo sacar el enlace?

.clase1:hover::after{
 }
1
  • a[href]{ visibility: hidden; } .clase1:hover::after{ visibility: visible; } Lo tengo asi y no funciona
    – Airsa97
    el 9 oct. 2019 a las 17:20

3 respuestas 3

3

Te dejo un pequeño ejemplo que puede servirte, oculta y muestra un div al pasar el ratón por encima.

Código:

#show,#hide {
	display:none;
}

div#content {
	display:none;
  padding:10px;
  background-color:#f6f6f6;
  width:200px;
  cursor:pointer;
}

input#show:hover ~ div#content {
	display:block;
}

input#hide:hover ~ div#content {
	display:none;
}
<label for="show">
  	<span>[Mostrar]</span>
</label>
<input type="radio" id="show" name="group">

<label for="hide">
	  <span>[Ocultar]</span>
</label>
<input type="radio" id="hide" name="group">

<div id="content">Contenido a mostrar</div>

Espero que pueda servirte!

1
  • 1
    Considero que una pequeña explicación del selector usado y como ayuda a responder la duda ayudaría mucho
    – BetaM
    el 9 oct. 2019 a las 16:24
3
  • Se me ocurre que como estas usando la pseudoclase after generes en la propiedad content el valor del enlace de tu etiqueta a
  • considerando que solo lo buscas con CSS el dinamismo estará un poco limitado:
  • Es opcional usar before o after para mostrar la posición que respecto de la etiqueta ocupará el valor enlace pasado

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        a:hover::after{
          content: " Enlace: https://demo.com"
        }
      </style>
    </head>
    <body>
    <a href="https://demo.com">demo sitio</a>
    </body>
    </html>

2
  • a[href]{ visibility: hidden; } .clase1:hover::after{ visibility: visible; } Lo tengo asi y no funciona. a href esta dentro de clase1
    – Airsa97
    el 9 oct. 2019 a las 17:34
  • @Airsa97 esos detalles deben ir por favor en la pregunta para entonces tener un contexto mas amplio del problema
    – BetaM
    el 10 oct. 2019 a las 5:26
1

Puedes hacerlo usando > en el selector:

.link {
  display: none;
}

.celda:hover>.link {
  display: inline;
}
<div class="celda">
  texto de la celda <a class="link" href="http://ejemplo.com">link1</a>
</div>
<div class="celda">
  texto de la celda <a class="link" href="http://ejemplo.com">link2</a>
</div>

El combinador > selecciona los elementos que son hijos directos del primer elemento. MDN

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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