如何将鼠标悬停在一个项目上并再突出显示三个项目？ （初学者）

时间：2017-01-21 05:14:18

标签： html css hover

我是编程新手（我昨天开始），我正在尝试为我的教室网站创建数字互动。我想向学生展示备用外角（1＆amp; 8和2＆amp; 7），方法是在左栏中突出显示两个角度名称，并且每当您滚动名称或数字时，两个数字都会在图像上突出显示。

到目前为止，我已经想出了如何在左侧列中获取两个角度名称以突出显示我在图像上滚动角度而不是图像上的其他数字。 （例如：当你超过数字1时，＆＃34;角度1和＃34;以及＆＃34;角度8＆＃34;在左侧突出显示但是我无法得到数字8也突出显示。）我也有没有弄清楚如何滚动角度名称并获取其他项目以突出显示。

有没有办法使用CSS和HTML来做到这一点？如果它有帮助，我在下面使用了代码！

＆＃13;
＆＃13; 
/* 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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

它只是一种解决问题的方法。

.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>

答案 1 :(得分：0)

据我所知，你想要在平行四边形中说明角度关系。内角，外角，垂直对角等 我只是为了展示外部角度。我希望你能设法展示其余的关系。

所以下面的代码显示了替代的外角关系。

＆＃13;
＆＃13; 
	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');
	}
＆＃13; 
	/* 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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题