javascript - 使用 JavaScript 通过悬停应用样式不适用于类

Question

我想在将鼠标悬停在不同父 div 中的另一个元素上时将样式应用于元素。

这些类是 lvcontainer 和 rvcontainer，当我将鼠标悬停在 lvcontainer 上时，rvcontainer 将设置为 显示: block 。

我正在尝试制作类似黑莓导航的多维下拉菜单。

var lvcontainer = document.getElementsByClassName('lvcontainer');
var rvcontainer = document.getElementsByClassName('rvcontainer');

for (i = 0; i < 1; i++) {
  lvcontainer[i].addEventListener("mouseover", function() {
    rvcontainer[i].style.display = "block";
  }, false);
}

body {
  margin: auto;
}

#container {
  display: table;
}

#lcontainer {
  padding: 0 10px 0 10px;
  display: table-cell;
}

#rcontainer {
  padding: 0 10px 0 10px;
  display: table-cell;
}

.rvcontainer {
  display: none;
}

<div id="container">
  <div id="lcontainer">
    <div class="lvcontainer">
      Country
    </div>
    <div class="lvcontainer">
      Genre
    </div>
  </div>
  <div id="rcontainer">
    <div class="rvcontainer">
      Japan
      <br> Korea
      <br> American
      <br>
    </div>
    <div class="rvcontainer">
      Comedy
      <br> Mystery
      <br> Horror
      <br>
    </div>
  </div>
</div>

Answer 1

有一些问题，但您可以通过循环和保护您的索引来做您想做的事。

下面假设总是有相同数量的 lvcontainer 和 rvcontainer

var lvcontainer = document.getElementsByClassName('lvcontainer');
var rvcontainer = document.getElementsByClassName('rvcontainer');

for (i = 0; i < lvcontainer.length; i++) {  // loop to the length
  (function(protectedIndex) {               // protect the index so clicks won't use last increment of i

    // show
    lvcontainer[protectedIndex].addEventListener("mouseover", function() {
      rvcontainer[protectedIndex].style.display = "block"; 
    }, false);

    // hide
    lvcontainer[protectedIndex].addEventListener("mouseout", function() {
      rvcontainer[protectedIndex].style.display = "none";
    }, false);
  })(i);
}

body {
  margin: auto;
}

#container {
  display: table;
}

#lcontainer {
  padding: 0 10px 0 10px;
  display: table-cell;
}

#rcontainer {
  padding: 0 10px 0 10px;
  display: table-cell;
}

.rvcontainer {
  display: none;
}

<div id="container">
  <div id="lcontainer">
    <div class="lvcontainer">
      Country
    </div>
    <div class="lvcontainer">
      Genre
    </div>
  </div>
  <div id="rcontainer">
    <div class="rvcontainer">
      Japan
      <br> Korea
      <br> American
      <br>
    </div>
    <div class="rvcontainer">
      Comedy
      <br> Mystery
      <br> Horror
      <br>
    </div>
  </div>
</div>

在您发表评论后，我会重组您的 html，使其在语义上更加正确:

#container ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#lcontainer {
  display: inline-block;
  position: relative;
}

.lvcontainer {
  padding: 0.1em 0.5em 0.1em 0.1em;
}

.rvcontainer {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
}

.lvcontainer:hover>.rvcontainer {
  display: block;
}

<div id="container">
  <ul id="lcontainer">
    <li class="lvcontainer">
      Country
      <ul class="rvcontainer">
        <li>Japan</li>
        <li>Korea</li>
        <li>American</li>
      </ul>
    </li>
    <li class="lvcontainer">
      Genre
      <ul class="rvcontainer">
        <li>Comedy</li>
        <li>Mystery</li>
        <li>Horror</li>
      </ul>
    </li>
  </ul>
</div>