Question

当我将鼠标悬停在另一个父div中的另一个元素上时，我希望将该样式应用于该元素。

这些课程为lvcontainer和rvcontainer，当我将鼠标悬停在lvcontainer上时，rvcontainer将设为display: block。

我试图制作像黑莓导航一样的多维下拉菜单。

＆＃13;

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);
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

＆＃13;

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);
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

在您发表评论之后，我会重新构建您的HTML，使其在语义上更正确：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

也许不是更清洁的解决方案，但你可以试试这个：

<html>
<head>
<style>
    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-c,.rvcontainer-g {
        display: none;
    }

</style>
</head>
<body>
<div id="container">
    <div id="lcontainer">
        <div class="lvcontainer-c">
            Country
        </div>
        <div class="lvcontainer-g">
            Genre
        </div>
    </div>
    <div id="rcontainer">
        <div class="rvcontainer-c">
            Japan
            <br> Korea
            <br> American
            <br>
        </div>
        <div class="rvcontainer-g">
            Comedy
            <br> Mystery
            <br> Horror
            <br>
        </div>
    </div>
</div>
</body>
<script>

var lvcontainerC = document.getElementsByClassName('lvcontainer-c');
var rvcontainerC = document.getElementsByClassName('rvcontainer-c');

lvcontainerC[0].addEventListener("mouseover", function(){
    rvcontainerC[0].style.display = "block";
}, false);
lvcontainerC[0].addEventListener("mouseout", function(){
    rvcontainerC[0].style.display = "none";
}, false);

var lvcontainerG = document.getElementsByClassName('lvcontainer-g');
var rvcontainerG = document.getElementsByClassName('rvcontainer-g');
lvcontainerG[0].addEventListener("mouseover", function(){
    rvcontainerG[0].style.display = "block";
}, false);
lvcontainerG[0].addEventListener("mouseout", function(){
    rvcontainerG[0].style.display = "none";
}, false);


</script>
</html>

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

2 个答案: