Código de CSS - Mostrar una capa al pasar el raton por encima de un texto o imagen

Imágen de perfil
Val: 591
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Mostrar una capa al pasar el raton por encima de un texto o imagengráfica de visualizaciones


CSS

Actualizado el 22 de Mayo del 2019 por Xavi (532 códigos) (Publicado el 31 de Marzo del 2011)
50.626 visualizaciones desde el 31 de Marzo del 2011
Código que muestra como al pasar el ratón por encima de un texto, te muestra una capa con el contenido que desees al lado del ratón. Al quitar el ratón de encima de el texto, desaparece la capa que se esta mostrando.

Versión 1:
Probado con IE6,7,8, 9, Firefox, Opera, Chrome y Safari.

Versión 2:
Funciona con todos los navegadores excepto con IE

layer-raton

Versión 1
estrellaestrellaestrellaestrellaestrella(4)

Publicado el 31 de Marzo del 2011gráfica de visualizaciones de la versión: Versión 1
46.439 visualizaciones desde el 31 de Marzo del 2011

Versión 2
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 14 de Mayo del 2019gráfica de visualizaciones de la versión: Versión 2
4.188 visualizaciones desde el 14 de Mayo del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Versión actualizada a ECMAScript 6
Se ha eliminado el control para las versiones de IE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Codigo La Web del Programador - http://www.lawebdelprogramador.com</title>
 
<style>
    /* Estilo que muestra la capa flotante */
    #flotante
    {
        position: absolute;
        display:none;
        font-family:Arial;
        font-size:0.8em;
        width:280px;
        border:1px solid #808080;
        background-color:#f1f1f1;
        padding:5px;
    }
    .estiloEjemplo {
        color:red;
        font-weight:bold;
    }
</style>
 
</head>
<body>
 
<!-- En este div se mostrar la capa emergente -->
<div id="flotante"></div>
 
<p>
    <span class='mostrarCapa' data-capa="Este codigo funciona<br>con todos los navegador<br>excepto IE">Información</span>
</p>
 
<p>
    <span class='mostrarCapa' data-capa="Texto con formato <b>html</b>">Pon el raton encima para ver la capa</span>
</p>
 
<p>
    <span class='mostrarCapa' data-capa="Este texto largo muestra como se va ajustando a la anchura de la capa. Puedes añadir código html y <span class='estiloEjemplo'>estilos</span>">Pon el raton encima para ver la capa</span>
</p>
 
</body>
</html>
 
<script>
/**
 * Funcion que muestra el div en la posicion del mouse
 *
 * @param event
 * @param text - texto a mostrar en la capa
 */
function showdiv(event,text)
{
    //determina un margen de pixels del div al raton
    margin=5;
 
    document.captureEvents(Event.MOUSEMOVE);
    let tempX = event.pageX;
    let tempY = event.pageY;
 
    if (tempX < 0){tempX = 0;}
    if (tempY < 0){tempY = 0;}
 
    // Modificamos el contenido de la capa
    const capa=document.getElementById('flotante');
    capa.innerHTML=text;
 
    // Posicionamos la capa flotante
    capa.style.top = (tempY+margin)+"px";
    capa.style.left = (tempX+margin)+"px";
    capa.style.display='block';
}
 
// Generamos un evento para cada elemento que tenga el la clase CSS "mostrarCapa"
const lugaresDondeMostrarLaCapa=document.querySelectorAll(".mostrarCapa");
for(lugar of lugaresDondeMostrarLaCapa) {
 
    lugar.addEventListener("mouseover",function() {
        // obtenemos la descripción a mostrar del data-capa si existe
        if(this.dataset.capa) {
            showdiv(event, this.dataset.capa);
        }
    });
 
    lugar.addEventListener("mouseout",() => {
        document.getElementById('flotante').style.display='none';
    });
}
 
</script>



Comentarios sobre la versión: Versión 2 (1)

<script>alert('Den una vista previa');</script>
29 de Julio del 2019
estrellaestrellaestrellaestrellaestrella
Deben dar una vista previa como e codepen
Responder

Comentar la versión: Versión 2

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2049