Decir que tengo un div con los siguientes atributos:

.box {
  width: 300px;
  height: 67px;
  margin-bottom: 15px;
}

¿Cómo podría hacer para que si alguien se cierne el ratón por encima de esta zona, se cambia el fondo a un color algo más oscuro y la convierte en un área accesible?

OriginalEl autor ShadyPotato | 2013-03-25

4 Comentarios

  1. 15

    CSS Sólo:

    .box:hover{
    background: blue; /* make this whatever you want */
    }

    A hacer un ‘clic’ de área, usted va a querer poner un <a></a> tag dentro del div, y puede que desee utilizar jQuery para establecer el href atributo.

    jQuery Solución

    $('.box').hover(function(){
    $(this).css("background", "blue");
    $(this).find("a").attr("href", "www.google.com");
    });

    Una tercera solución:
    Usted puede cambiar el cursor, y darle también un evento click con jQuery:

    $('.box').click(function(){
    //do stuff
    });

    Uso el de arriba, junto con el siguiente CSS:

    .box{
    background: blue;
    cursor: pointer;
    }
    Lo que si quería tener una frontera cuando se ciernen sobre el div de 5px todo sin atornillar hasta la colocación de las cosas a su alrededor?
    Si se agrega un borde, se van a agregar a los elementos de ancho. Vas a tener en cuenta para que.
    Así que decir que tengo el 300px x 67px div, y no son las mismas divs por encima y por debajo de este div. ¿Cómo podría hacer para que si se cernía sobre el div, es de destacar que como usted sugiere, pero hizo resaltar 5px más grande que el div tamaño?
    Me acaba de cambiar los atributos de anchura y altura usando jQuery, acaba de darse cuenta de que usted va a tener que ajustar en consecuencia para el resto de los elementos de la página no pasar por todo el lugar.
    Que había incluso dv una buena respuesta?

    OriginalEl autor What have you tried

  2. 1
    .box:hover {
        background: #999;
        cursor: pointer;
    }

    Cuando se coloca el fondo cambia el color que quieres y el cursor se convierte en un puntero. Puede desencadenar un evento con jQuery así:

    $('.box').click(customFunction);

    OriginalEl autor kapantzak

  3. 1

    La vinculación de un div que ha funcionado para mí simplemente envolviendo en un un etiqueta. Aquí es un ejemplo de abajo con Bootstrap clases:

    <a href="#">
    <div class="col-md-4">
    
    <span class="glyphicon glyphicon-send headericon"></span>
    
    <p class="headerlabel">SEND</p>
    <p class="headerdescription">Send candidate survey</p>    
    
    </div> 
    </a>

    A cambio de su div color en hover agregar:

    div:hover {
    background-color: rgba(255,255,255,0.5);
    }

    a tu CSS 🙂

    OriginalEl autor ariebear

  4. 0

    Se puede hacer con CSS sólo:

    .box:hover{
      background: blue;
      cursor: pointer;
    }

    O con Javascript (estoy usando jQuery en este ejemplo)

    ;(function($){
      $('.box').bind('hover', function(e) {
        $(this).css('background', 'blue');
      });
    })(jQuery);

    OriginalEl autor Tomás Juárez

Dejar respuesta

Please enter your comment!
Please enter your name here