CODEWITHSUNDEEP
javascript
daivd rush
daivd rush

Reputation: 87

Applying style through hover using JavaScript doesn't work with class

I want to apply a style to an element when hovering over another element in a different parent div.

The classes are lvcontainer and rvcontainer and when I hover over lvcontainer, rvcontainer will be set to display: block.

I'm trying to make a multidimensional drop menu like blackberry navigation.

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>

Upvotes: 2

Views: 46

Answers (2)

Pete
Pete

Reputation: 58462

There are a few issues but you can do what you want by looping through and protecting your index.

The below assumes there will always be the same number of lvcontainer and 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>

After your comment, I would restructure your html to be a bit more semantically correct:

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

Upvotes: 1

iubema
iubema

Reputation: 349

Maybe is not the cleaner solution but you can try this:

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

Upvotes: 0

Related Questions