On a CSS hover event, can I change another div's styling?
Yes, you can do that, but only if #b is after #a in the HTML.
If #b comes immediately after #a: http://jsfiddle.net/u7tYE/
#a:hover + #b {
background: #ccc
}
<div id="a">Div A</div>
<div id="b">Div B</div>
That's using the adjacent sibling combinator (+).
If there are other elements between #a and #b, you can use this: http://jsfiddle.net/u7tYE/1/
#a:hover ~ #b {
background: #ccc
}
<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>
That's using the general sibling combinator (~).
Both + and ~ work in all modern browsers and IE7+
If #b is a descendant of #a, you can simply use #a:hover #b.
ALTERNATIVE: You can use pure CSS to do this by positioning the second element before the first. The first div is first in markup, but positioned to the right or below the second. It will work as if it were a previous sibling.
On a CSS hover event, can I change the above div's styling?
You'll need a little bit of jQuery, since you can't alter a previous siblings styling on hover in CSS:
$('#b').hover( function(){ $('#a').css({'background':'#ccc'}); }, function(){ $('#a').css({'background':'initial'}); });//#a:hover + #b {// background: #ccc//}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="a">Div A</div><div id="b">Div B</div>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>:hover on an element to change another?
Unfortunately you are only able to select siblings and children with CSS. To be able to target .test you would need to apply :hover on either the ul or container div.
A detailed explanation of child and sibling selectors in CSS can be found here.
Update
Whilst I'm not a fan of the semantics, here is an POC example of how it could work using CSS and changing the structure of the markup.
<div class="the-container">
<ul>
<li class="item-html"><a class="html" href="#"></a></li>
<li><a class="css" href="#"></a></li>
<li><a class="photoshop" href="#"></a></li>
<li><a class="illustrator" href="#"></a></li>
<li><a class="javascript" href="#"></a></li>
<li><div class="test"><p>Hello</p></div></li>
</ul>
</div>
.item-html:hover ~ li div.test { background: yellow; }
Fiddle
Related Topics
How to Create a Flexible Vertical Line in Between Two Divs
How to Prevent Long Words from Breaking My Div
Vertical Align Center in Bootstrap 4
Why Does Applying a Css-Filter on the Parent Break the Child Positioning
Transparent Text Cut Out of Background
Matching an Empty Input Box Using Css
How to Set Opacity in Parent Div and Not Affect in Child Div
Internet Explorer'S CSS Rules Limits
Vuejs Vue-Router Linking an External Website
Bootstrap 4 Carousel Responsive (Image and Text)
How to Word-Wrap Long Words in a Div
How to Center an Absolutely Positioned Element in a Div
Can CSS Detect the Number of Children an Element Has
How to Hide an Element When Printing a Web Page
What Does a Space Mean in a CSS Selector? I.E. Difference Between .Classa.Classb and .Classa .Classb