Tengo 3 componentes y cada componente tiene 3 elementos (i, h4, p), quiero cambiar el color de h4 usando la matriz en JavaScript cuando pase el mouse sobre uno de estos componentes... ¿Cómo puedo hacerlo?
Soy nuevo aquí y no sabía cómo agregar el código, por lo que puede ver la parte prevista a través del enlace inferior, la última parte
.services { width: 80%; margin: auto; display: flex; flex-wrap: wrap; align-items: center; } .s-title { width: 100%; } .s-items { display: flex; } .s-item { width: 30%; text-align: center; flex: 1; margin: 20px; transition: ease 0.5s; } .s-item:hover { box-shadow: 4px 4px 10px #00bfb2; transform: scale(1.05, 1.05); } <section class="services"> <div class="s-title"> <h1>MY SERVICES</h1> <p>A LOAD UI/UX </p> </div> <div class="s-items"> <div class="s-item"> <i class="fa fa-paint-brush"></i> <h4>Website Design </h4> <p>As a leading designer</p> </div> <div class="s-item"> <i class="fa fa-code"></i> <h4>Website Development </h4> <p>As a developer.</p> </div> <div class="s-item"> <i class="fa fa-american-sign-language-interpreting"></i> <h4>24x7 Support </h4> <p>I offer experienced</p> </div> </div> </section>No necesitas JavaScript para esto. Solo agrega esto a tu CSS:
.s-item:hover h4 { color: red; }Ejemplo:
.services { width: 80%; margin: auto; display: flex; flex-wrap: wrap; align-items: center; } .s-title { width: 100%; } .s-items { display: flex; } .s-item { width: 30%; text-align: center; flex: 1; margin: 20px; transition: ease 0.5s; } .s-item:hover { box-shadow: 4px 4px 10px #00bfb2; transform: scale(1.05, 1.05); } .s-item:hover h4 { color: red; } <section class="services"> <div class="s-title"> <h1>MY SERVICES</h1> <p>A LOAD UI/UX </p> </div> <div class="s-items"> <div class="s-item"> <i class="fa fa-paint-brush"></i> <h4>Website Design </h4> <p>As a leading designer</p> </div> <div class="s-item"> <i class="fa fa-code"></i> <h4>Website Development </h4> <p>As a developer.</p> </div> <div class="s-item"> <i class="fa fa-american-sign-language-interpreting"></i> <h4>24x7 Support </h4> <p>I offer experienced</p> </div> </div> </section>