Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » ¿Cómo cambiar los colores de los botones al mostrar la imagen?

CSS - ¿Cómo cambiar los colores de los botones al mostrar la imagen?

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Enrique
Val: 5
Ha aumentado su posición en 136 puestos en CSS (en relación al último mes)
Gráfica de CSS

¿Cómo cambiar los colores de los botones al mostrar la imagen?

Publicado por Enrique (3 intervenciones) el 21/06/2021 03:16:31
Hola que tal. Tengo un pequeño problema con este codigo. Es un slider de imagenes donde se hace click al boton y se muestra la imagen. Los botones tienen el color gris, y cuando paso el cursor por encima, se cambian a un gris mas claro, pero no logro hacer que cuando presiono el boton y se muestra la imagen, el boton de la imagen mostrada cambie a un color blanco y se mantenga hasta que presione el boton de otra imagen y esa otra imagen tenga el boton blanco y la imagen anterior vuelva a su color original. A ver si me pueden ayudar a agregar esa parte.

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <link href="hoyy1.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="videos">
            <div class="vids">
                <input type="radio" name="video-slide" id="vid1" checked>
                <input type="radio" name="video-slide" id="vid2">
 
                <img src="https://images.pexels.com/photos/5069216/pexels-photo-5069216.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="v1" alt="vid1">
                <img src="https://images.pexels.com/photos/5560206/pexels-photo-5560206.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="v2" alt="vid2">
            </div>
            <div class="dots">
                <label for="vid1"></label>
                <label for="vid2"></label>
            </div>
        </div>
    </body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.videos{
    background-color: chocolate;
    width: 52%;
    position: relative;
    overflow: hidden;
}
.vids{
    background-color: cornflowerblue;
    width: 100%;
    display: flex;
}
.vids img{
    width: 100%;
    height: 400px;
}
.vids input{
    display: none;
}
.dots{
    background-color: darkkhaki;
    display: flex;
    justify-content: center;
    margin: 5px;
}
.dots label{
    height: 12px;
    width: 12px;
    background-color: darkslategray;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 8px;
}
.dots label:hover{
    background-color: gray;
}
#vid1:checked ~ .v1{
    margin-left: 0;
}
#vid2:checked ~ .v2{
    margin-left: -100%;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

¿Cómo cambiar los colores de los botones al mostrar la imagen?

Publicado por joel (252 intervenciones) el 21/06/2021 08:42:46
Hola Enrique, ahora solo me viene a la cabeza añadir un estilo al elemento que has pulsado con javascript... espero que te sirva.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div class="videos">
            <div class="vids">
                <input type="radio" name="video-slide" id="vid1" checked>
                <input type="radio" name="video-slide" id="vid2">
 
                <img src="https://images.pexels.com/photos/5069216/pexels-photo-5069216.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="v1" alt="vid1">
                <img src="https://images.pexels.com/photos/5560206/pexels-photo-5560206.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="v2" alt="vid2">
            </div>
            <div class="dots">
                <label for="vid1" class="selected"></label>
                <label for="vid2"></label>
            </div>
        </div>
    </body>
</html>
 
<script>
const botones=document.querySelectorAll(".dots>label");
botones.forEach(el => el.addEventListener("click", pulsado));
function pulsado(e) {
    botones.forEach(el => el.classList.remove("selected"));
    this.classList.add("selected");
}
</script>
 
<style>
.selected {
    background-color: gray!important;
}
.videos{
    background-color: chocolate;
    width: 52%;
    position: relative;
    overflow: hidden;
}
.vids{
    background-color: cornflowerblue;
    width: 100%;
    display: flex;
}
.vids img{
    width: 100%;
    height: 400px;
}
.vids input{
    display: none;
}
.dots{
    background-color: darkkhaki;
    display: flex;
    justify-content: center;
    margin: 5px;
}
.dots label{
    height: 12px;
    width: 12px;
    background-color: darkslategray;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 8px;
}
.dots label:hover{
    background-color: gray;
}
#vid1:checked ~ .v1{
    margin-left: 0;
}
#vid2:checked ~ .v2{
    margin-left: -100%;
}
</style>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Enrique
Val: 5
Ha aumentado su posición en 136 puestos en CSS (en relación al último mes)
Gráfica de CSS

¿Cómo cambiar los colores de los botones al mostrar la imagen?

Publicado por Enrique (3 intervenciones) el 21/06/2021 15:41:14
El detalle está en que tengo problemas al usar JS en mi sitio web, por eso quería ver si se puede hacer solamente con CSS.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar