How does a element in children style change when something event to parent? (hover)

Question

I have 3 component and every component have 3 element (i,h4,p),I want when I hover to one of these components to change the color of h4 using the array in JavaScript... How can i do it?

I'm new here and I didn't know how to add the code, so you can see the intended part through the bottom link, the last part

.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>

score 1 · Answer 1 · answered Nov 10 '21 at 22:47

You don't need JavaScript for this. Just add this to your CSS:

.s-item:hover h4 {
  color: red;
}

Example:

.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>

How does a element in children style change when something event to parent? (hover)

1 Answers1