0

Tengo un texto y quiero que aparezca una imagen al pasar el mouse por arriba de una frase. Esta es la forma que encontré, pero quisiera que el texto que sigue abajo (las zetas) no se desplace al aparecer la imagen. Hay forma de que la imagen aparezca cubriendo el texto que sigue en lugar de desplazandolo? osea que aparezca arriba de las zetas? O mejor aún, hay forma de elegir en que parte de la pantalla aparecerá la imagen? O eso no es posible con JavaScript?


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title> 
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> 
    
<style>

p {font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font:bold;
    font-size:16px;
}
    
    span{
        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font:bold;
    font-size:16px;
        
    }   
        
    
</style>    
    
    
    <script type="text/javascript">
        function mostrar(id,tipo)
        {
            if (tipo==1) 
            {
                $("#"+id).show("slow");
            }
            if(tipo==2)
            {
                $("#"+id).hide("slow");
            }
        }
    </script>   
    
</head>
    
<body>
    
    
    <section>
        
        
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>        
        
    <div class="container hovring">     
                <ul>
                    <li>
                        <span id="mostrar" onmouseover="mostrar('imagen_mostrar',1);" onmouseout="mostrar('imagen_mostrar',2);">SOME TEXT</span>
                            <br>
                                <label id="imagen_mostrar" style="display:none;"><img src="../imagenes/fotosINFO/hair.jpg" alt=""></label>
                    </li>
                </ul>
    </div>
        
<p>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</p>        
        
    </section>
    

    
</body>

</html>

1 respuesta 1

0

A tu elemento con el id imagen_mostrar agrégale la siguiente regla CSS

#imagen_mostrar {
            position: absolute;
            /* top: 0;
            right: 0; */
        }

Estoy haciendo uso del position absolute, esto por defecto te coloca el elemento por encima de cualquier elemento en su posición original cuando se mostró en el DOM.

Si quieres modificar la posición, debes modificar las propiedas top, left, right y bottom, aquí uso top y right

#imagen_mostrar {
            position: absolute;
            top: 0;
            right: 0;
        }

Código completo

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Documento sin título</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <style>
        p {
            font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
            font: bold;
            font-size: 16px;
        }

        span {
            font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
            font: bold;
            font-size: 16px;

        }

        #imagen_mostrar {
            position: absolute;
            /* top: 0;
            right: 0; */
        }
    </style>


    <script type="text/javascript">
        function mostrar(id, tipo) {
            if (tipo == 1) {
                $("#" + id).show("slow");
            }
            if (tipo == 2) {
                $("#" + id).hide("slow");
            }
        }
    </script>

</head>

<body>

    <section>
        <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>

        <div class="container hovring">
            <ul>
                <li>
                    <span id="mostrar" onmouseover="mostrar('imagen_mostrar',1);"
                        onmouseout="mostrar('imagen_mostrar',2);">SOME TEXT</span>
                    <br>
                    <label id="imagen_mostrar" style="display:none;"><img src="http://lorempixel.com/400/200/"
                            alt=""></label>
                </li>
            </ul>
        </div>

        <p>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</p>

    </section>

</body>

</html>

Tu Respuesta

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

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