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

Imágen de perfil
Val: 685
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

estrellaestrellaestrellaestrellaestrella(5)
Actualizado el 22 de Mayo del 2019 por Xavi (Publicado el 31 de Marzo del 2011)
48.262 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.340 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
1.923 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
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2049
Revisar política de publicidad