Este es un ejemplo HTML de mi sitio web. Quiero cambiar CSS cuando se agrega alguna clase en un contenedor con una imagen. En esta situación, se agrega una clase al hacer clic en img. ¿Cómo puedo agregar CSS cuando se agrega una clase y se elimina una clase? Vea los ejemplos a continuación. Veo algunos tutoriales con javascript, pero ¿se puede hacer esto también solo con CSS?

.container //when image is unselected{
    border: 2px dotted;
}

.container //when image is selected{
    border: 2px solid;
}
//When image is unselected
    <div class="container">
      <div class="checkbox">
       <div class="value">
        <img class="some-image">
       </div>
      </div>
    </div>

//When image is selected
    <div class="container">
      <div class="checkbox">
       <div class="value">
        <img class="some-image selected">
       </div>
      </div>
    </div>
0
Chocoprins18 17 oct. 2018 a las 05:35

2 respuestas

La mejor respuesta

Sí, esto es posible usando solo CSS. La clave aquí es usar el atributo global contenteditable y :target pseudoclase , como se muestra a continuación.

.container {
  display: inline-block;
}

.container:focus {
  outline: none;
}

.container:focus img {
  border: 2px dotted;
}

.container img {
  border: 2px solid;
}
<div>
  <div class="container" contenteditable>
    <div class="checkbox">
      <div class="value">
        <img class="some-image" src="https://via.placeholder.com/100x100">
      </div>
    </div>
  </div>

  <div class="container" contenteditable>
    <div class="checkbox">
      <div class="value">
        <img class="some-image" src="https://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>
1
Adam Chubbuck 18 oct. 2018 a las 13:41

Esto es algo muy sencillo de lograr en JavaScript. JS le permite escribir una gran cantidad de código impulsado por eventos. Aquí hay un ejemplo de lo que está tratando de hacer en JS.

Enlace

Si está buscando una solución css pura, lo más cercano que obtendrá es esto:

.container {
  border: 2px dotted;
}

.container:active {
  border: 2px solid;
}
-1
Jordan 17 oct. 2018 a las 02:59