How to add hover effect when one element hovered and affect on another element / class in css?

Question

What should I do when I hover one class and It will affect another class?

If I hover .service_text and .service_icon should change the background-color of .service_bar_1

For example Link: https://codepen.io/aasaadzaman5/pen/XWJPjpN when

.service_content .service_text:hover .service_bar_1,
.service_content .service_text:hover .service_bar_2,
.service_content .service_text:hover .service_bar_3 { 
          background-color: #e74c3c; 
          height: 2px; 
 }

  <!-- Our Services Start -->
           <section id="custom_width">
              <div class="services">
                 <div class="container-fluid">
                    <div class="row">
                       <div class="col-md-6">
                          <div class="service_content">
                             <div class="service_content_tablecell">
                                <h2>OUR SeRVICES</h2>
                                <div class="service_text">
                                   <h4>WEB DESIGN</h4>
                                   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ip sum
                                      has
                                      been the industry's standard dummy text ever.</p>
                                </div>
                                <div class="service_text">
                                   <h4>PRINT DESIGN</h4>
                                   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ip sum
                                      has
                                      been the industry's standard dummy text ever.</p>
                                </div>
                                <div class="service_text">
                                   <h4>PHOTOGRAPHY</h4>
                                   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ip sum
                                      has
                                      been the industry's standard dummy text ever.</p>
                                </div>
                             </div>
                          </div>
                         <div class="service_bar_1 service_bar"> </div>
                         <div class="service_bar_2 service_bar"></div>
                         <div class="service_bar_3 service_bar"></div>
                       </div>

                       <div class="col-md-6">
                          <div class="service_bg">
                             <div class="service_icon_1 service_icon">
                                <a href="#"><i class="fab fa-facebook-f"></i></a>
                             </div>
                             <div class="service_icon_2 service_icon">
                                <a href="#"><i class="fab fa-facebook-f"></i></a>
                             </div>
                             <div class="service_icon_3 service_icon">
                               <a href="#"><i class="fab fa-facebook-f"></i></a>
                             </div>
                          </div>
                       </div>
                    </div><!-- row / -->
                 </div><!-- container-fluid / -->
              </div><!-- service_bg / -->
           </section><!-- Our Services End -->

Please add only relevant code, and specify better what is your problem, your question in unclear!!! PS .service_bar is a child of .service_text? — Sfili_81, Jan 16 '20 at 07:40
[This might be what you are looking for.](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered) — Sreehari, Jan 16 '20 at 07:48
@Sfili_81 I am new on Stack Overflow. So I mess up to ask. Thank you for your suggestion. — Md. Rana, Jan 16 '20 at 08:46
@Sfili_81 When I will hover on `.service_icon_1` should change `.service_bar_1` background-color. I got a solution by javascript but I want to do it with CSS. — Md. Rana, Jan 16 '20 at 08:58
@Md.AsaduzzamanRana for only css refer this https://stackoverflow.com/a/6910112/6108882 or https://stackoverflow.com/a/4502693/6108882 — Udhay Titus, Jan 16 '20 at 09:30

score 2 · Accepted Answer · answered Jan 16 '20 at 07:45

by jquery you can achieve. try the below code in your code pen

$(document).ready(function() {
  $(".service_icon_1").hover(function() {
    $(".service_bar_1").css("background-color","#e74c3c");
  }, function() {
    $(".service_bar_1").css("background-color","#2a2a2a");
  });
   $(".service_icon_2").hover(function() {
    $(".service_bar_2").css("background-color","#e74c3c");
  }, function() {
    $(".service_bar_2").css("background-color","#2a2a2a");
  });
   $(".service_icon_3").hover(function() {
    $(".service_bar_3").css("background-color","#e74c3c");
  }, function() {
    $(".service_bar_3").css("background-color","#2a2a2a");
  });
});

Code snippet from your codepen

$(document).ready(function() {
  $(".service_icon_1").hover(function() {
    $(".service_bar_1").css("background-color","#e74c3c");
  }, function() {
    $(".service_bar_1").css("background-color","#2a2a2a");
  });
   $(".service_icon_2").hover(function() {
    $(".service_bar_2").css("background-color","#e74c3c");
  }, function() {
    $(".service_bar_2").css("background-color","#2a2a2a");
  });
   $(".service_icon_3").hover(function() {
    $(".service_bar_3").css("background-color","#e74c3c");
  }, function() {
    $(".service_bar_3").css("background-color","#2a2a2a");
  });
});

* {
   margin: 0px;
   padding: 0px;
}

body {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   color: #999999;
   font-size: 14px;
   font-family: 'Open Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Source Sans Pro', sans-serif;
   margin: 0;
   padding: 0;
   color: #6a6a6a;
   font-weight: 700;
}

p {
   color: #999999;
   font-family: 'Source Sans Pro', sans-serif;
   font-weight: 300;
}

ul,
p {
   margin: 0px;
   padding: 0px;
}

img {
   max-width: 100%;
   height: auto;
}

.margin_padding_0 {
   margin: 0px;
   padding: 0px;
}

input:focus,
button:focus,
textarea:focus {
   outline: none;
}

::-webkit-input-placeholder {
   color: #999999;
   font-weight: 500;
}

::-moz-placeholder {
   color: #999999;
   font-weight: 500;
}

:-ms-input-placeholder {
   color: #999999;
   font-weight: 500;
}

::-ms-input-placeholder {
   color: #999999;
   font-weight: 500;
}

::placeholder {
   color: #999999;
   font-weight: 500;
}

a:hover,
a:focus {
   text-decoration: none;
}



/************************************** 
     Our Services Section Start
***************************************/
.services {
   height: 765px;
   background-color: #202020;
   z-index: 1;
   position: relative;
}

.services:after {
   background-image: url(https://images.unsplash.com/photo-1579097273782-909a29b692c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
   background-position: center;
   background-size: cover;
   height: 765px;
   position: absolute;
   z-index: -2;
   content: '';
   width: 100%;
   top: 0%;
   left: 0%;
}

.service_icon_1 a,
.service_icon_2 a,
.service_icon_3 a {
   background: #f4f5f9;
   width: 64px;
   height: 64px;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   display: inline-flex;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
  
   font-size: 27px;
}

.service_icon_2 a {
   top: 48%;
   left: 5%;
}

.service_icon_3 a {
   top: 68%;
   left: 5%;
}

.service_icon_1 a:after,
.service_icon_2 a:after,
.service_icon_3 a:after {
   content: '';
   position: absolute;
   background: #fff;
   width: 72px;
   height: 72px;
   z-index: -1;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   opacity: .3;
   left: -6%;
   top: -7%;
}

.service_icon_2 a:after {
   left: -6%;
   top: -7%;
}

.service_icon_3 a:after {
   left: -6%;
   top: -7%;
}

.service_content {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
   -ms-flex-pack: end;
   justify-content: flex-end;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   height: 765px;
   text-align: right;
   padding-right: 58px;
   position: relative;
}

.service_bar {
   position: absolute;
   width: 34px;
   height: 1px;
   background-color: #2a2a2a;
   left: 0%;
   -webkit-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
   z-index: 5;
}

.service_bar_1 {
   top: 45%;
}

.service_bar_2 {
   top: 52%;
}

.service_bar_3 {
   top: 59%;
}

.service_text {
   margin-bottom: 70px;
   max-width: 670px;
}

.service_text:last-child {
   margin-bottom: 0px;
}

.service_content .service_text:hover+.service_bar_1,
.service_content .service_text:hover+.service_bar_2,
.service_content .service_text:hover+.service_bar_3 {
   background-color: #e74c3c;
   height: 2px;
}

.service_content_tablecell {
   margin-left: 30px;
}

.service_content_tablecell h2 {
   font-size: 36px;
   color: #f4f5f9;
   text-transform: uppercase;
   position: relative;
}

.service_content_tablecell h2:after {
   position: absolute;
   content: '';
   width: 36px;
   height: 6px;
   background: #e74c3c;
   -webkit-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
   top: 50%;
}

.service_text h4 {
   font-size: 18px;
   text-transform: uppercase;
   color: #e74c3c;
   font-weight: 600;
   margin-top: 65px;
   margin-bottom: 10px;
}

.service_text p {
   line-height: 1.8;
   font-weight: 500;
}



/************************************** 
     Our Services Section End
***************************************/

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <!-- Favicon -->
   <link rel="icon" href="favicon-32x32.png" type="image/png">

   <title>Html Starter Package By Md. Asaduzzaman Rana</title>

   <!-- CSS Links -->

   <!-- Google Fonts -->
   <link
      href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Source+Sans+Pro:300,300i,400,400i,600,700,700i,900&display=swap"
      rel="stylesheet">
   <!-- Material icons CDN Link -->
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <!-- Font Awesome CSS Link -->
   <link rel="stylesheet" href="css/all.min.css">
   <link rel="stylesheet" href="css/slick.css">
   <!-- <link rel="stylesheet" href="css/owl.carousel.min.css">
   <link rel="stylesheet" href="css/owl.theme.default.min.css"> -->

   <!------- Bootstrap CSS Link ------->
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <!-- Bootstrap CSS CDN Link -->
   <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->

   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/responsive.css">
</head>

<body>
   

<!-- Our Services Start -->
   <section id="custom_width">
      <div class="services">
         <div class="container-fluid">
            <div class="row">
               <div class="col-md-6">
                  <div class="service_content">
                     <div class="service_content_tablecell">
                        <h2>OUR SeRVICES</h2>
                        <div class="service_text">
                           <h4>WEB DESIGN</h4>
                           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ip sum
                              has
                              been the industry's standard dummy text ever.</p>
                        </div>
                        <div class="service_text">
                           <h4>PRINT DESIGN</h4>
                           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ip sum
                              has
                              been the industry's standard dummy text ever.</p>
                        </div>
                        <div class="service_text">
                           <h4>PHOTOGRAPHY</h4>
                           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ip sum
                              has
                              been the industry's standard dummy text ever.</p>
                        </div>
                     </div>
                  </div>
                 <div class="service_bar_1 service_bar"> </div>
                 <div class="service_bar_2 service_bar"></div>
                 <div class="service_bar_3 service_bar"></div>
               </div>

               <div class="col-md-6">
                  <div class="service_bg">
                     <div class="service_icon_1 service_icon">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                     </div>
                     <div class="service_icon_2 service_icon">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                     </div>
                     <div class="service_icon_3 service_icon">
                       <a href="#"><i class="fab fa-facebook-f"></i></a>
                     </div>
                  </div>
               </div>
            </div><!-- row / -->
         </div><!-- container-fluid / -->
      </div><!-- service_bg / -->
   </section><!-- Our Services End -->





























    <!------- jQuery Link ------->
   <!-- <script src="js/jquery-3.4.1.min.js"></script> -->
   <!-- jQuery CDN Links -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

   <!------- Bootstrap js Link ------->
   <!-- <script src="js/bootstrap.min.js"></script> -->
   <!-- Bootstrap CDN link -->
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"></script>

   <!-- <script src="js/Necessary-Plugin/Owl-Carousel-Slider/owl.carousel.min.js"></script> -->
   <script src="js/slick.min.js"></script>

   <!------- Font Awesome js link ------->
   <!-- <script src="js/all.min.js"></script> -->
   <!-- Font Awesome CDN or Kit js link -->
   <script src="https://kit.fontawesome.com/41baba5a65.js" crossorigin="anonymous"></script>

   <!------- isotope js link ------->
   <!-- <script src="js/Necessary-Plugin/isotope/isotope.pkgd.min.js"></script> -->
   <!-- isotop js CDN link -->
   <!-- <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> -->

   <!-- CounterUp -->
   <!-- <script src="js/Necessary-Plugin/Counterup-on-Scrolling/jquery.waypoints.min.js"></script>
   <script src="js/Necessary-Plugin/Counterup-on-Scrolling/jquery.countup.min.js"></script> -->

   <script src="js/script.js"></script>
</body>

</html>

How to add hover effect when one element hovered and affect on another element / class in css?

1 Answers1