CODEWITHSUNDEEP
javascripthtmlcss
caps
caps

Reputation: 29

JS for visibility effect not working with addeventlistener

Skimmed through similar questions but didnt quite get the answer im looking for. I have an <a> that I want to be visible when hovering another <a>. I know my code is getting messy but still wanna know if this is doable. I tried with addeventlistener, which I thought would work, but it does absolutely nothing, is something missing from my js?

document.getElementById("defaultlang").addEventListener("mouseover", mouseOver);
document.getElementById("defaultlang").addEventListener("mouseout", mouseOut);

function mouseOver() {
  document.getElementById('secondlang').style.visibility = "visible";
}

function mouseOut() {
  document.getElementById('secondlang').style.visibilty = "hidden";
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

#headermenu li + li:before {
    content: "/";
    padding: 0px 11px 0px 0px;
    color: #abb8c3;
}

#secondlang {
  visibility: hidden;
}

.ruflag {
  position: relative;
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 20px;
  margin: -2em;
  background: black;
  left: 400px;
  top: 20px;
}


header div span {
  position: relative;
}

.lang {
  position: relative;
  left: 460px;
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 20px;
  margin: -2em;
}

.lang:hover + .ruflag {
  visibility: visible;
}

header span p {
  display: inline;
  color: #164da8;
}

button a {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 18px 40px;
  margin: -2em;
  color: white;
  font-size: 12px;
  font-weight: 600;
  font-stretch: ultra-condensed;
  letter-spacing: 0.5px;
}

button a:hover {
  color: #e9b003;
  transition: 0.4s;
}

header {
  font-family: "Barlow Condensed",sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.4px;
  font-stretch: ultra-condensed;
}
ul {
  position: relative;
  left: 90px;
}

li {
  padding: 10px;
  display: flex;
  align-items: center;
}

ul li a {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #332826;
  font-stretch: ultra-condensed;
}

a:hover {
  color: #164da8;
}

.rutext {
  color: #b2a9a6;
}

.flex {
  display: flex;
}


.logo {
  width: 177px;
  height: 77px;
  padding-left: 20px;
  padding-top: 5px;
}

.headerbox {
  padding: 10px;
  align-items: center;
}

.epoodnupp {
  height: 50px;
  width: 120px;
  background-color: #164da8;
  border: none;
  position: relative;
  left: 880px;

}

.heading2 {
  text-align: center;
  font-size: 3.294rem;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Fixus</title>
  <link rel="stylesheet" href="fixus.css">
  <link rel="dns-prefetch" href="//fonts.googleapis.com">
  <script type="text/javascript" src="fixusjs.js"></script>
</head>
<body>
  <header>
    <div class="headerbox flex">
      <a class="lang" href="#" id="defaultlang">
        <span>
          <img src="https://fixus.ee/wp-content/plugins/sitepress-multilingual-cms/res/flags/et.png" alt="">
          <p>Eesti</p>
        </span>
      </a>
      <a href="#" title="Русский" class="ruflag hidden" id="secondlang">
        <span>
          <img src="https://fixus.ee/wp-content/plugins/sitepress-multilingual-cms/res/flags/ru.png" alt="">
          <p class="rutext">Русский</p>
        </span>
      </a>
    </div>
  </header>
  </body>
  </html>

Upvotes: 0

Views: 70

Answers (1)

RandomSlav
RandomSlav

Reputation: 602

You can do this with plains css

#defaultlang:hover ~ #secondlang {
    visibility: visible;
}

#secondlang {
    visibility: hidden;
}

~ selects all the siblings of #defaultlang. You can use + to select only the adjacent sibling.

Upvotes: 1

Related Questions