How to Affect Other Elements When One Element Is Hovered

How to affect other elements when one element is hovered

If the cube is directly inside the container:

#container:hover > #cube { background-color: yellow; }

If cube is next to (after containers closing tag) the container:

#container:hover + #cube { background-color: yellow; }

If the cube is somewhere inside the container:

#container:hover #cube { background-color: yellow; }

If the cube is a sibling of the container:

#container:hover ~ #cube { background-color: yellow; }

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

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>

CSS, hover one element, affect another

If you need move the span, when you put your mouse over the a, add this

nav ul li a:hover > span {}

Is there any way to hover over one element and affect a different element?

The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.

In the case of a descendent:

#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
    opacity: 0.3;
}

Which will apply to elements such as:

<div id="parent_element">
    <div id="child_element">Content</div>
</div>

For adjacent siblings:

#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

Which works for mark-up such as:

<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>

In both cases the latter element in the selector is the one chosen.

Given your pseudo-code example, you probably want something like:

img:hover + img {
    opacity: 0.3;
    color: red;
}

JS Fiddle demo.

How to Affect Other Elements When One Element Is Hovered