悬停一个框并突出显示另一个答案

【问题标题】：Hover one box and highlight another悬停一个框并突出显示另一个
【发布时间】：2017-01-24 13:01:11
【问题描述】：

.first {
  background: red;
  width: 100px;
  height: 100px;
}
.first:hover .outer-box {
  background: black;
}
.outer-box {
  width: 100px;
  height: 100px;
  background: green;
}

<div class="icons">
  <div class="first"></div>
</div>

<div class="outer-box"></div>

如何将鼠标悬停在一个框上并突出显示另一个？

如果盒子在同一个容器中会更容易，但不幸的是它们不在。

Hope you can help perhaps updating my pen with no jquery if doable

【问题讨论】：

相关：stackoverflow.com/questions/4502633/…
How to affect other elements when a div is hovered的可能重复

标签： html css

【解决方案1】：

您不能操作没有层级的对象。你可以使用这个方法：

<div class="icons">
   <div class="first">
       <div class="outer-box"> </div>
   </div>
</div>

/* css */
.first:hover .outer-box{
    /* Your css code */
}

或者你可以使用javascript：

document.getElementsByClassName('first')[0].onmouseover = function(){
  document.getElementsByClassName('outer-box')[0].style = "background: black"
}

document.getElementsByClassName('first')[0].onmouseout = function(){
  document.getElementsByClassName('outer-box')[0].style = "background: green"
}

.first{
  background: red;
  width: 100px;
  height: 100px;
}

.outer-box{
  width: 100px;
  height: 100px;
  background: green;
}

<div class="icons">
  <div class="first">
  </div>
</div>

<div class="outer-box">
</div>

【讨论】：

【解决方案2】：

您可以使用+ combinator 轻松完成此操作。问题是，它必须是一个相对对象，这意味着 - 它必须在 html 层次结构中处于同一级别。

您可以阅读有关此选择器的更多信息here.

Here is an update Pen.

【讨论】：

【解决方案3】：

这是一个使用最少javascript的简单方法。

function color() {
  document.getElementById("outer").style.background = "black";
}
function outcolor() {
  document.getElementById("outer").style.background = "green";
}

.first{
  background: red;
  width: 100px;
  height: 100px;
}

.outer-box{
  width: 100px;
  height: 100px;
  background: green;
}

<div class="icons">
  <div class="first" onmouseover="color()" onmouseout="outcolor()">
  </div>
</div>

<div class="outer-box" id="outer">
</div>

【讨论】：

【解决方案4】：

添加一个 class="show someid" 到一个项目，当你悬停它时，它会高亮 someid，或者只是添加一个 class="show"，它会高亮在可悬停的 innerText 中找到的元素。

var show=document.getElementsByClassName('show')
for(var i=0;i<show.length;i=i+1){
 show[i].onmouseover = function(){
  var theclass=this.getAttribute('class');
  theclass=theclass.replace("show","");
  theclass=theclass.replace(" ","");
  if(theclass==''){
   var text=this.innerText;
  } else {
   var text=theclass;
  }
  document.getElementById(text).style = "background: #dddddd;"
 }
 show[i].onmouseout = function(){
  var theclass=this.getAttribute('class');
  theclass=theclass.replace("show","");
  theclass=theclass.replace(" ","");
  if(theclass==''){
   var text=this.innerText;
  } else {
   var text=theclass;
  }
  document.getElementById(text).style = "background: none;"
 }
}

<p id="item1">This is item 1.</p>
<p id="item2">This is item 2.</p>
<hr>
<span class="show">item1</span>
<br>
<span class="show item2">Hover me to show item 2</span>

【讨论】：