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{
}
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadTengo 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{
}
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!
after
generes en la propiedad content
el valor del enlace de tu etiqueta a
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>
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