Quiero hacer una imagen en blanco y negro cuando la colocas sobre ella o haces clic en ella. Tiene que permanecer en blanco y negro hasta que se desplace o haga clic en otra imagen. Es por eso que decidí agregar una clase .seleccionada al div con una clase .in - para que una imagen pueda convertirse en blanco y negro (usando escala de grises (100%))

Funciona perfectamente con un objetivo simple: desplazarse en css, pero cuando uso addClass () de jQuery, ¡nada parece funcionar! ¿Por qué? y cual es la mejor manera de lograrlo? Aquí está mi html donde agrego mis imágenes:

@foreach (var image in Model.ProductImages)
    {
        <div class="in goal pic">
            <img src="~/Content/Images/apple.jpg" alt="test"/>
        </div>
    }

Aquí están mis estilos CSS:

    .in {
    text-align: center;
}


.goal {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.selected {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.pic {
    border: 2px solid #fff;
    float: left;
    height: 100px;
    width: 100px;
    margin: 20px;
    overflow: hidden;
    -webkit-box-shadow: 5px 5px 5px #111;
    box-shadow: 5px 5px 5px #111;
}

Y aquí está mi guión

$(document).ready(function () {

    $(".in").hover(function () {
        $(".in").removeClass('selected');
        $(this).addClass("selected");
    });  
});
0
Оля 18 feb. 2018 a las 18:33

2 respuestas

La mejor respuesta

Estás agregando la clase selected a div y no a la imagen. Para que funcione, debe cambiar su selector en CSS.

.selected img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
}
1
void 18 feb. 2018 a las 15:35

Bueno, 1. el selector debería ser .in img y también debes admitir el evento out. Con respecto a la documentación de jquery https://api.jquery.com/hover/

$('.in img').hover(
  function() { $(this).addClass('selected') },
  function() { $(this).removeClass('selected') },
)
1
webdeb 18 feb. 2018 a las 15:41