How to hover over one item and highlight three more? (beginner)

Question

I'm new to programming (I started yesterday) and I am trying to create a digital interactive for my classroom website. I would like to show students alternate exterior angles(1&8 and 2&7) by having both the angle names highlight in the left column and both the numbers highlight on the image whenever you scroll over either name or number.

So far, I have figured out how to get the two angle names in the left column to highlight when I roll over an angle on the image but not the other number on the image. (For instance: When you go over the number 1, "Angle 1" and "Angle 8" highlight on the left but I cannot get the number 8 to also highlight.) I also have not figured out how to scroll over the angle names and get the other items to highlight.

Is there a way to do this using CSS and HTML? I attached the code I'm using below if it helps!

/* style of left side */

.item {
  width: 100px
}
.item a,
.fake a {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: block;
  text-decoration: none
}
.item a:hover {
  color: #fff!important
}
#id1 a {
  color: red
}
#id1 a:hover,
#fakeDiv1 a {
  background: red
}
#id2 a {
  color: blue
}
#id2 a:hover,
#fakeDiv2 a {
  background: blue
}
#id3 a {
  color: green
}
#id3 a:hover,
#fakeDiv3 a {
  background: green
}
#id4 a {
  color: purple
}
#id4 a:hover,
#fakeDiv4 a {
  background: purple
}
#id5 a {
  color: deeppink
}
#id5 a:hover,
#fakeDiv5 a {
  background: deeppink
}
#id6 a {
  color: orange
}
#id6 a:hover,
#fakeDiv6 a {
  background: orange
}
#id7 a {
  color: yellow
}
#id7 a:hover,
#fakeDiv7 a {
  background: yellow
}
#id8 a {
  color: aqua
}
#id8 a:hover,
#fakeDiv8 a {
  background: aqua
}
/*right side div and links styling*/

#rightDiv {
  background-image: url("http://i.imgur.com/C97feff.jpg");
  position: absolute;
  left: 100px;
  top: 0;
  height: 320px;
  width: 535px
}
#rightDiv .region {
  background: grey;
  opacity: 0.25;
  filter: alpha(opacity=25);
  position: absolute;
  left: 0;
  top: 0;
  width: 35px;
  height: 35px;
  cursor: pointer
}
/*right side region links positioning*/

#rightDiv a#id1match {
  left: 335px;
  top: 55px
}
#rightDiv a#id2match {
  left: 405px;
  top: 55px
}
#rightDiv a#id3match {
  left: 280px;
  top: 98px
}
#rightDiv a#id4match {
  left: 350px;
  top: 98px
}
#rightDiv a#id5match {
  left: 140px;
  top: 200px
}
#rightDiv a#id6match {
  left: 208px;
  top: 200px
}
#rightDiv a#id7match {
  left: 90px;
  top: 240px
}
#rightDiv a#id8match {
  left: 155px;
  top: 242px
}
/*left link hover right side change*/

#id1:hover ~ #rightDiv a#id1match {
  background: red
}
#id2:hover ~ #rightDiv a#id2match {
  background: blue
}
#id3:hover ~ #rightDiv a#id3match {
  background: green
}
#id4:hover ~ #rightDiv a#id4match {
  background: purple
}
#id5:hover ~ #rightDiv a#id5match {
  background: deeppink
}
#id6:hover ~ #rightDiv a#id6match {
  background: orange
}
#id7:hover ~ #rightDiv a#id7match {
  background: yellow
}
#id8:hover ~ #rightDiv a#id8match {
  background: aqua
}
/*right link hover left side change*/

.fake {
  position: absolute;
  left: -9999px;
  top: 0
}
.fake a {
  color: #fff
}
#id1match:hover {
  background: red
}
#id1match:hover ~ #fakeDiv1 {
  left: -100px;
  top: 0
}
#id1match:hover {
  background: red
}
#id1match:hover ~ #fakeDiv8 {
  left: -100px;
  top: 280px;
}
#id2match:hover {
  background: blue
}
#id2match:hover ~ #fakeDiv2 {
  left: -100px;
  top: 40px
}
#id2match:hover {
  background: blue
}
#id2match:hover ~ #fakeDiv7 {
  left: -100px;
  top: 240px
}
#id3match:hover {
  background: green
}
#id3match:hover ~ #fakeDiv3 {
  left: -100px;
  top: 80px
}
#id4match:hover {
  background: purple
}
#id4match:hover ~ #fakeDiv4 {
  left: -100px;
  top: 120px
}
#id5match:hover {
  background: deeppink
}
#id5match:hover ~ #fakeDiv5 {
  left: -100px;
  top: 160px
}
#id6match:hover {
  background: orange
}
#id6match:hover ~ #fakeDiv6 {
  left: -100px;
  top: 200px
}
#id7match:hover {
  background: yellow
}
#id7match:hover ~ #fakeDiv7 {
  left: -100px;
  top: 240px
}
#id7match:hover {
  background: yellow
}
#id7match:hover ~ #fakeDiv2 {
  left: -100px;
  top: 40px
}
#id8match:hover {
  background: aqua
}
#id8match:hover ~ #fakeDiv8 {
  left: -100px;
  top: 280px
}
#id8match:hover {
  background: aqua
}
#id8match:hover ~ #fakeDiv1 {
  left: -100px;
  top: 0px
}

<div id="id1" class="item"><a href="#">Angle 1</a>
</div>
<div id="id2" class="item"><a href="#">Angle 2</a>
</div>
<div id="id3" class="item"><a href="#">Angle 3</a>
</div>
<div id="id4" class="item"><a href="#">Angle 4</a>
</div>
<div id="id5" class="item"><a href="#">Angle 5</a>
</div>
<div id="id6" class="item"><a href="#">Angle 6</a>
</div>
<div id="id7" class="item"><a href="#">Angle 7</a>
</div>
<div id="id8" class="item"><a href="#">Angle 8</a>
</div>
<div id="rightDiv">
  <a id="id1match" class="region"></a>
  <a id="id2match" class="region"></a>
  <a id="id3match" class="region"></a>
  <a id="id4match" class="region"></a>
  <a id="id5match" class="region"></a>
  <a id="id6match" class="region"></a>
  <a id="id7match" class="region"></a>
  <a id="id8match" class="region"></a>

  <div id="fakeDiv1" class="fake"><a href="#">Angle 1</a>
  </div>
  <div id="fakeDiv2" class="fake"><a href="#">Angle 2</a>
  </div>
  <div id="fakeDiv3" class="fake"><a href="#">Angle 3</a>
  </div>
  <div id="fakeDiv4" class="fake"><a href="#">Angle 4</a>
  </div>
  <div id="fakeDiv5" class="fake"><a href="#">Angle 5</a>
  </div>
  <div id="fakeDiv6" class="fake"><a href="#">Angle 6</a>
  </div>
  <div id="fakeDiv7" class="fake"><a href="#">Angle 7</a>
  </div>
  <div id="fakeDiv8" class="fake"><a href="#">Angle 8</a>
  </div>
</div>

Sorry my explanation is confusing. I am hoping when I scroll over "Angle 1" on the left that the "Angle 8" box will highlight as well as the boxes with 1 and 8 on the image. When I scroll over the box with a 1 on the image, I want the box with the 8 to highlight on the image and the boxes with "Angle 1" and "Angle 8" on the left. I would want those four elements to be linked in some way when I hover over one of them so it is clear which two angles are the alternate exterior. When I scroll over the 1 on the image "Angle 1" and "Angle 8" highlight on the left but the 8 on the image does not. — da9090, Jan 21 '17 at 05:30
Maybe this will help http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements You have a similar problem — blah, Jan 21 '17 at 05:37

score 1 · Answer 1 · answered Jan 21 '17 at 05:44

Its just a way to solve your problem.

.section { background:#ccc; }
    .layer { background:#ddd; }
    .section:hover .layer0 { border:2px solid #333; }
    .section:hover .layer1 { border:2px solid #F90; }
    .section:hover .layer2 { border:2px solid #690;}

<html>
  
<head>
  </head>
<body>
  <div class="section">
    <div class="layer0">Angle1</div>
    <div class="layer1">Angle2</div>
    <div class="layer2">Angle3</div>
  </div>
</body>
</html>

Deep 3015 · Accepted Answer · 2017-01-21T06:18:30.123

As far as my understanding you want to illustrate angle relation in parallelogram. Interior angle,exterior angle,vertically opposite angle etc. I just made to show exterior angles.I hope you could manage to show remaining relations.

So my code below to show alternate exterior angle relations.

 function showExteriorExt1(a,b){
  document.getElementById('id'+a+'match').setAttribute('style','background:red');
  document.getElementById('id'+b+'match').setAttribute('style','background:aqua');
 }
 function showExteriorExt2(a,b){
  document.getElementById('id'+a+'match').setAttribute('style','background:blue');
  document.getElementById('id'+b+'match').setAttribute('style','background:yellow');
 }
 function reset(a,b){
  document.getElementById('id'+a+'match').removeAttribute('style','background');
  document.getElementById('id'+b+'match').removeAttribute('style','background');
 }

 /* style of left side */

.item {
  width: 100px
}

.item a,
.fake a {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: block;
  text-decoration: none
}

.item a:hover {
  color: #fff!important
}

#id1 a {
  color: red
}

#id1 a:hover,
#fakeDiv1 a {
  background: red
}

#id2 a {
  color: blue
}

#id2 a:hover,
#fakeDiv2 a {
  background: blue
}

#id3 a {
  color: green
}

#id3 a:hover,
#fakeDiv3 a {
  background: green
}

#id4 a {
  color: purple
}

#id4 a:hover,
#fakeDiv4 a {
  background: purple
}

#id5 a {
  color: deeppink
}

#id5 a:hover,
#fakeDiv5 a {
  background: deeppink
}

#id6 a {
  color: orange
}

#id6 a:hover,
#fakeDiv6 a {
  background: orange
}

#id7 a {
  color: yellow
}

#id7 a:hover,
#fakeDiv7 a {
  background: yellow
}

#id8 a {
  color: aqua
}

#id8 a:hover,
#fakeDiv8 a {
  background: aqua
}


/*right side div and links styling*/

#rightDiv {
  background-image: url("http://i.imgur.com/C97feff.jpg");
  position: absolute;
  left: 100px;
  top: 0;
  height: 320px;
  width: 535px
}

#rightDiv .region {
  background: grey;
  opacity: 0.25;
  filter: alpha(opacity=25);
  position: absolute;
  left: 0;
  top: 0;
  width: 35px;
  height: 35px;
  cursor: pointer
}


/*right side region links positioning*/

#rightDiv a#id1match {
  left: 335px;
  top: 55px
}

#rightDiv a#id2match {
  left: 405px;
  top: 55px
}

#rightDiv a#id3match {
  left: 280px;
  top: 98px
}

#rightDiv a#id4match {
  left: 350px;
  top: 98px
}

#rightDiv a#id5match {
  left: 140px;
  top: 200px
}

#rightDiv a#id6match {
  left: 208px;
  top: 200px
}

#rightDiv a#id7match {
  left: 90px;
  top: 240px
}

#rightDiv a#id8match {
  left: 155px;
  top: 242px
}


/*left link hover right side change*/

#id1:hover ~ #rightDiv a#id1match {
  background: red
}

#id2:hover ~ #rightDiv a#id2match {
  background: blue
}

#id3:hover ~ #rightDiv a#id3match {
  background: green
}

#id4:hover ~ #rightDiv a#id4match {
  background: purple
}

#id5:hover ~ #rightDiv a#id5match {
  background: deeppink
}

#id6:hover ~ #rightDiv a#id6match {
  background: orange
}

#id7:hover ~ #rightDiv a#id7match {
  background: yellow
}

#id8:hover ~ #rightDiv a#id8match {
  background: aqua
}


/*right link hover left side change*/

.fake {
  position: absolute;
  left: -9999px;
  top: 0
}

.fake a {
  color: #fff
}

#id1match:hover {
  background: red
}

#id1match:hover ~ #fakeDiv1 {
  left: -100px;
  top: 0
}

#id1match:hover {
  background: red
}

#id1match:hover ~ #fakeDiv8 {
  left: -100px;
  top: 280px;
}

#id2match:hover {
  background: blue
}

#id2match:hover ~ #fakeDiv2 {
  left: -100px;
  top: 40px
}

#id2match:hover {
  background: blue
}

#id2match:hover ~ #fakeDiv7 {
  left: -100px;
  top: 240px
}

#id3match:hover {
  background: green
}

#id3match:hover ~ #fakeDiv3 {
  left: -100px;
  top: 80px
}

#id4match:hover {
  background: purple
}

#id4match:hover ~ #fakeDiv4 {
  left: -100px;
  top: 120px
}

#id5match:hover {
  background: deeppink
}

#id5match:hover ~ #fakeDiv5 {
  left: -100px;
  top: 160px
}

#id6match:hover {
  background: orange
}

#id6match:hover ~ #fakeDiv6 {
  left: -100px;
  top: 200px
}

#id7match:hover {
  background: yellow
}

#id7match:hover ~ #fakeDiv7 {
  left: -100px;
  top: 240px
}

#id7match:hover {
  background: yellow
}

#id7match:hover ~ #fakeDiv2 {
  left: -100px;
  top: 40px
}

#id8match:hover {
  background: aqua
}

#id8match:hover ~ #fakeDiv8 {
  left: -100px;
  top: 280px
}

#id8match:hover {
  background: aqua
}

#id8match:hover ~ #fakeDiv1 {
  left: -100px;
  top: 0px
}

<div id="id1" class="item"><a href="#">Angle 1</a></div>
<div id="id2" class="item"><a href="#">Angle 2</a></div>
<div id="id3" class="item"><a href="#">Angle 3</a></div>
<div id="id4" class="item"><a href="#">Angle 4</a></div>
<div id="id5" class="item"><a href="#">Angle 5</a></div>
<div id="id6" class="item"><a href="#">Angle 6</a></div>
<div id="id7" class="item" ><a href="#">Angle 7</a></div>
<div id="id8" class="item" ><a href="#">Angle 8</a></div>
<div id="rightDiv">
  <a id="id1match" onmouseover="showExteriorExt1(1,8)" onmouseout="reset(1,8)" class="region"> </a>
  <a id="id2match" onmouseover="showExteriorExt2(2,7)" onmouseout="reset(2,7)"class="region"> </a>
  <a id="id3match" class="region"> </a>
  <a id="id4match" class="region"> </a>
  <a id="id5match" class="region"> </a>
  <a id="id6match" class="region"> </a>
  <a id="id7match" onmouseover="showExteriorExt2(2,7)" onmouseout="reset(2,7)"class="region"> </a>
  <a id="id8match" onmouseover="showExteriorExt1(1,8)" onmouseout="reset(1,8)" class="region"> </a>

  <div id="fakeDiv1" class="fake"><a href="#">Angle 1</a></div>
  <div id="fakeDiv2" class="fake"><a href="#">Angle 2</a></div>
  <div id="fakeDiv3" class="fake"><a href="#">Angle 3</a></div>
  <div id="fakeDiv4" class="fake"><a href="#">Angle 4</a></div>
  <div id="fakeDiv5" class="fake"><a href="#">Angle 5</a></div>
  <div id="fakeDiv6" class="fake"><a href="#">Angle 6</a></div>
  <div id="fakeDiv7" class="fake"><a href="#">Angle 7</a></div>
  <div id="fakeDiv8" class="fake"><a href="#">Angle 8</a></div>
</div>

that is perfect! Is there a way to make it so that it does the same thing when you scroll over "Angle 1", "Angle 2", "Angle 7", and "Angle 8" on the left side? — da9090, Jan 21 '17 at 17:00
also i can get this to run on this website but i haven't been able to get it to work on jsfiddle. Do you know why this might be an issue? — da9090, Jan 21 '17 at 18:00
in jsfiddle inside javascript section top right there is cog.click it you get drop down select "no wrap in head" and it'll work: [link](https://jsfiddle.net/g5vhu6h3/) working — Deep 3015, Jan 21 '17 at 18:19

How to hover over one item and highlight three more? (beginner)

2 Answers2