Good afternoon, I have a question like what I can do to change the color of a div by moving the mouse in another one for example:
I have two div with the name of the first div of 1 and the second div with the name of 2 are both give black color, when I hover the mouse in the div 2 it changes the color to red in div 2 and in div 1 automatically, how could someone help me?
With CSS, as long as the element to be changed is the child of the hover element:
div:hover h2 {
color: red;
}<div>
<h1>Olá</h1>
<h2>Adeus</h2>
</div>With more freedom, any hover element activates any other DOM:
$('h1').hover(
function () {
$('h2').css({'color': 'red'});
},
function () {
$('h2').css({'color': 'black'});
}
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Olá</h1>
<h2>Adeus</h2> If it were to change only in div 2 you could use the :hover event of CSS.
$("#dois").on("mouseover", function() {
$("#um").css("background-color", "red");
$("#dois").css("background-color", "red");
});
$("#dois").on("mouseout", function() {
$("#um").css("background-color", "black");
$("#dois").css("background-color", "black");
});.box {
background: black;
width: 100px;
height: 100px;
color: white;
font-size: 100px;
border-radius: 3px;
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="um" class="box">1</div>
<div id="dois" class="box">2</div>