added 34 characters in body

Source Link

edited Jul 6, 2020 at 9:21

16.7k
5
84
106

What I want to do is when a certain div is hovered, it'd affect the properties of another div.

For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that when I hover over #container, #cubeis affected.

div {
  outline: 1px solid red;
} 

#container {
  width: 200px;
  height: 30px;
} 

#cube {
  width: 30px;
  height: 100%;
  background-color: red;
} 

#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">
 
  <div id="cube">
  </div>
 
</div>

What I want to do is when a certain div is hovered, it'd affect the properties of another div.

For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that when I hover over #container, #cubeis affected.

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">
 
  <div id="cube">
  </div>
 
</div>

What I want to do is when a certain div is hovered, it'd affect the properties of another div.

For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that when I hover over #container, #cubeis affected.

div {
  outline: 1px solid red;
} 

#container {
  width: 200px;
  height: 30px;
} 

#cube {
  width: 30px;
  height: 100%;
  background-color: red;
} 

#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">
  <div id="cube">
  </div>
</div>

deleted 78 characters in body; edited title

Source Link

edited Oct 24, 2019 at 17:29

TylerH

21.1k
72
78
105

How to affect other elements when a divone element is hovered

I think this is a very basic question but I'm not sure how it can be done.

What I want to do is when a certain div is hovered, it'd affect the properties of another div.

For example, in this simple exampleJSFiddle demo, when you hover over #cube it changes the background-color but what I want is that when I hover over #container, #cubeis affected.

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">

  <div id="cube">
  </div>

</div>

How to affect other elements when a div is hovered

I think this is a very basic question but I'm not sure how it can be done.

What I want to do is when a certain div is hovered, it'd affect the properties of another div.

For example, in this simple example, when you hover over #cube it changes the background-color but what I want is that when I hover over #container, #cubeis affected.

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">

  <div id="cube">
  </div>

</div>

How to affect other elements when one element is hovered

What I want to do is when a certain div is hovered, it'd affect the properties of another div.

For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that when I hover over #container, #cubeis affected.

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">

  <div id="cube">
  </div>

</div>

Re-added JSFiddle link because its existence was only useful, not harmful, and unhid the code snippet.

Source Link

edited Mar 24, 2016 at 20:39

TylerH

21.1k
72
78
105

I think this is a very basic question but I'm not sure how it can be done.

What I want to do is when a certain div is hovered, it'd affect the properties of another div.

For example, in this simple examplethis simple example, when you hover over #cube it changes the background-color but what I want is that when I hover over #container, #cubeis affected.

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">

  <div id="cube">
  </div>

</div>

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">

  <div id="cube">
  </div>

</div>

I think this is a very basic question but I'm not sure how it can be done.

What I want to do is when a certain div is hovered, it'd affect the properties of another div.

For example, in this simple example, when you hover over #cube it changes the background-color but what I want is that when I hover over #container, #cubeis affected.

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">

  <div id="cube">
  </div>

</div>

I think this is a very basic question but I'm not sure how it can be done.

What I want to do is when a certain div is hovered, it'd affect the properties of another div.

For example, in this simple example, when you hover over #cube it changes the background-color but what I want is that when I hover over #container, #cubeis affected.

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">

  <div id="cube">
  </div>

</div>

Move the example into the question from JSFiddle

Source Link

edited Sep 9, 2015 at 9:26

Dan Dascalescu

149.6k
59
327
415

Loading

Basic grammary

Source Link

edit approved Dec 16, 2013 at 17:07

Claudio

894
1
15
32

Loading

Question Protected by CommunityBot

occurred Jul 16, 2013 at 18:15

deleted 97 characters in body; edited title

Source Link

edited Apr 7, 2013 at 4:54

abatishchev

99.6k
88
300
439

Loading

Source Link

asked Dec 21, 2010 at 18:29

Trufa

40.2k
43
130
191

Loading

Collectives™ on Stack Overflow

Return to Question

How to affect other elements when a divone element is hovered

How to affect other elements when a div is hovered

How to affect other elements when one element is hovered