Estoy creando una barra lateral y la quiero para que cuando pase el cursor sobre un div específico, la imagen de ese div cambie la escala de grises del 100 % al 0 %. Aquí está mi progreso actual: https://jsfiddle.net/8tx6ju97/
<div class="example"> <div class="a"> <img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="one" width="60" /> </div> <div class="b"> <img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="two" width="60" /> </div> </div> <style> .one, .two { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); margin-left: 19px; padding-top: 10px; padding-bottom: 10px; } .two { padding-top: 10px; } .one { padding-bottom: 5px; } .example { width: 100px; background-color: black; position: absolute; top: 0; left: 0; } .a { outline: 1px solid white; } </style>solo agregue a su css este código
.one:hover { -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); } .two:hover { -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); }https://jsfiddle.net/q5pdemjh/1/
¡disfrutar!
Podrías hacer algo como esto:
.one, .two { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); margin-left: 19px; padding-top: 10px; padding-bottom: 10px; transition: all 0.5s; } .one:hover, .two:hover { filter: grayscale(0); -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ } La transition: all 0.5s aseguran que pasar de escala de grayscale(100%) a escala de grayscale(0) y viceversa se suaviza en un período de 0.5 s, mientras que el pseudoelemento :hover le permite activar el cambio solo cuando pasa el cursor sobre los divs con clases .one y .two .
Puedes usar este código.
.one, .two { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); margin-left: 19px; padding-top: 10px; padding-bottom: 10px; transition: all .5s ease; } .two { padding-top: 10px; } .one { padding-bottom: 5px; } .example { width: 100px; background-color: black; position: absolute; top: 0; left: 0; } .a:hover .one, .b:hover .two { -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); } <div class="example"> <div class="a"> <img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="one" width="60" /> </div> <div class="b"> <img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="two" width="60" /> </div> </div>