can i change the style of class 1 when class 2 is focus or hover? is there any way do this with css?
like here.
<button class='class 1'></button>
<button class='class 2'></button>
can i change the style of class 1 when class 2 is focus or hover? is there any way do this with css?
like here.
<button class='class 1'></button>
<button class='class 2'></button>
Share
Improve this question
asked Feb 25, 2019 at 6:19
Aref.HeydariAref.Heydari
572 silver badges9 bronze badges
5 Answers
Reset to default 3You can do it using mouseover
and mouseout
$('.class').on('mouseover', function(e) {
$('.class').not($(this)).addClass('hover')
})
$('.class').on('mouseout', function(e) {
$('.hover').removeClass('hover')
})
.hover {
background: green;
}
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='class 1'>Test</button>
<button class='class 2'>Test 1</button>
Try this
html
<button class='class1'>button1</button>
<button class='class2'>button2</button>
css
.class1:hover + .class2,
.class1:active + .class2,
.class1:focus + .class2{
background: blue;
}
.class2:hover + .class1,
.class2:active + .class1,
.class2:focus + .class1{
background: green;
}
Thank you.
Try this. It will change the bg color of button 1 when button 2 is hovered on
$(document).ready(function() {
$('.class2').hover(function() {
$('.class1').css('background-color', 'blue')},
function(){
$('.class1').css('background-color', '')
})
})
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='class1'>Button</button>
<button class='class2'>Button</button>
This is possible using only CSS, but it can be a bit finicky.
You could use pseudo-classes focus
and hover
and select the immediately after element with the class .class1
. Since +
will target the element immediately after you can use flex
and order
to move your buttons around so they appear in the correct order:
.class2:hover+.class1 {
background: lime;
color: red;
}
.class2:focus+.class1 {
background: red;
color: white;
}
.wrapper {
display: flex;
}
.class1 {
order: 1;
}
.class2 {
order: 2;
}
<div class="wrapper">
<button class='class2'>Button2</button>
<button class='class1'>Button1</button>
</div>
You can try with jQuery's .hover()
.
Please note: class names do not allow space in them.
$('.class2').hover(
function() {
$('.class1').css({color:'red'});
}, function() {
$('.class1').css({color:'blue'});
}
);
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='class1'>Button 1</button>
<button class='class2'>Button 2</button>