Autor Tema: HTML y CSS cambiar el tipo de puntero mouse efectos cursor hover wait CU01054D (Leído 2724 veces)

EnigmaticNerd · « **en:** 24 de Septiembre 2017, 00:18 »

Buenas tardes. Este es el enunciado del ejercicio CU01054D del curso pdf de desarrollo web con CSS desde cero:

Citar

Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:

a) Deben exisitir dos contenedores (div1, div2) situados en horizontal, cada uno con margin 25px en todas direcciones, sin relleno, ancho de 200 píxeles, altura de 300 píxeles y borde sólido de 5 píxeles de anchura con color de borde violeta.

b) El div 1 debe contener un texto con varios links (etiqueta <a> de html). Al pasar el cursor sobre cualquiera de los links dentro del div1 el cursor deberá ponerse en modo help (es decir, se verá un pequeño interrogante junto al cursor).

c) El div 2 debe contener una imagen con anchura 200 píxeles y altura igual o superior a 300 píxeles. La imagen debe a su vez ser un link a otro documento HTML al que denominamos documento 2 y que debe abrirse en una nueva pestaña cuando se pulse sobre la imagen. Al pasar el cursor sobre la imagen el cursor deberá ponerse en modo zoom-in, es decir, mostrar una lupa con un pequeño + en su interior. En el documento 2 debemos tener la misma imagen pero con mayor tamaño, por ejemplo 600 píxeles de anchura. Antes de crear el código tendrás que preparar las imágenes: partir de una imagen con un tamaño más amplio, y con la ayuda de cualquier programa de edición de imágenes crear su gemela con menores dimensiones.

Acá el código del primer documento html:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01054D
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Efectos hover con el cursor - aprenderaprogramar.com"/>
        <meta name="keywords" content="css, diseño, curso, hover, cursor, move, progress, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01054.css"/>
    </head>
    <body>
        
        <div>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>
            <a href="#">hover</a>  
        </div>
        
        <div>
            <a href="CU01054B.html" title="zoom" target="_blank"><img src="https://i.imgur.com/OVvRWed.jpg" alt="goomba"/></a>
        </div>

    </body>
</html>

Acá el código del segundo documento html:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01054DB
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Efectos hover con el cursor - aprenderaprogramar.com"/>
        <meta name="keywords" content="css, diseño, curso, hover, cursor, move, progress, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01054.css"/>
    </head>
    <body>
        
        <div id="img">
           <img src="https://i.imgur.com/9af0DCH.jpg" alt="goomba"/>
        </div>

    </body>
</html>

Acá la hoja de estilos css:

Código: [Seleccionar]

/*Estilos para el ejercicio CU01054D*/

*{
    padding:0;
    margin:0;
}
div{
    float:left;
    margin:25px;
    width:200px;
    height:300px;
    border:5px solid purple;
    text-align:center;
}

div:first-child a{
    display:block;
    font-size:0.9em;
    margin-top:1px;
    margin-bottom:-8.5px;
    margin-left:20px;
    padding:5px;
    letter-spacing:20px;
    text-transform:capitalize;
    text-decoration:none;
}

div:first-child a:hover{
    cursor:help;
}

div:last-child img:hover{
    cursor:zoom-in;
}

#img{
    min-width:600px;
    min-height:600px;
}

#img img{
    cursor:auto;
}
[code]


Nota: En el navegador firefox el valor "zoom-in" de la propiedad cursor no se visualiza. En Chromium si. 

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

Alex Rodríguez · « **Respuesta #1 en:** 06 de Noviembre 2017, 18:22 »

Hola, ejercicio bien resuelto

Como ya se ha comentado en otros hilos, posiblemente sea preferible identificar los elementos (los div en este caso) por id en lugar de con selectores del tipo div:last-child ya que si se introducen más elementos, estos selectores podrían fallar.

En mi navegador el texto del primer div se sale un poco por debajo de la caja

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: