translate с помощью onmouseenter

119

20 декабря 2020, 21:00

Необходимо чтобы при нахождении курсора на выезжающем div#rollfile, сам этот же div никуда не мог уехать, и лишь после смещения курсора за его пределы, чтобы он уезжал. А пока что div#rollfile не уезжает лишь до окончания нахождения курсора на div#file. В итоге требуется чтобы div#rollfile оставался видимым если курсор находится либо на самом div#rollfile, либо на div#file, в противном случае он должен исчезнуть

(function() { 
  var flag2 = true; 
 
  document.getElementById("file").onmouseenter = function() { 
    let x = document.getElementById("rollfile").style; 
    x.transform = 'translateY(0px)'; 
  } 
 
  document.getElementById("rollfile").onmouseenter = function() { 
    flag2 = false; 
  } 
  document.getElementById("rollfile").onmouseleave = function() { 
    flag2 = true; 
  } 
 
 
  document.getElementById("file").onmouseleave = function() { 
    if (flag2 === true) { 
      let x = document.getElementById("rollfile").style; 
      setTimeout(() => x.transform = 'translateY(-200px)', 200); 
    } 
  } 
}());

html, 
body { 
  height: 100%; 
  overflow: hidden; 
} 
 
body { 
  margin: 0px; 
  font-size: 3em; 
  letter-spacing: 1px; 
  background-color: white; 
} 
 
.topmenu { 
  display: grid; 
  grid-gap: 0px; 
  grid-template-columns: repeat(5, 1ft); 
  grid-template-rows: repeat(1, 1fr); 
  font-size: 0.5em; 
  text-align: center; 
} 
 
.topmenu div:nth-child(-n+4):hover { 
  border: 1px solid black; 
  color: red; 
} 
 
.file { 
  z-index: 5; 
  width: 20vw; 
} 
 
.rollfile { 
  position: fixed; 
  border-top: 1px solid black; 
  margin: 0 0 0 0; 
  font-size: 0.5em; 
  height: 10h; 
  width: 20vw; 
  text-align: center; 
  transform: translateY(-200px); 
  z-index: 0; 
  transition: 0.7s; 
} 
 
.rollfile div:nth-child(-n+4):hover { 
  background-color: black; 
  color: #00FF03; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
</head> 
 
<body> 
  <div class="topmenu"> 
    <div class="file" id="file">File</div> 
  </div> 
 
 
  <div class="rollfile" id="rollfile"> 
    <div class="start" id="start">Start</div> 
    <div class="open" id="open">End</div> 
  </div> 
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script> 
</body> 
 
</html>

Answer 1

(function() { 
  var flag2 = false; 
 
  document.getElementById("file").onmouseenter = function() { 
    let x = document.getElementById("rollfile").style; 
    x.transform = 'translateY(0px)'; 
    flag2 = true; 
    //console.log("f ent : " + flag2); 
  } 
 
  document.getElementById("rollfile").onmouseenter = function() { 
    flag2 = true; 
    //console.log("rf ent : " + flag2); 
  } 
  document.getElementById("rollfile").onmouseleave = function() { 
    //flag2 = false; если откоментить то скрываться будет при потери фокуса rollfile 
    if (!flag2) { // скрывает если вы выбран пункт меню и покинут фокус 
      let x = document.getElementById("rollfile").style; 
      setTimeout(() => x.transform = 'translateY(-200px)', 200); 
    } 
    //console.log("rf lv : " + flag2); 
  } 
 
 
  document.getElementById("file").onmouseleave = function() { 
    if (!flag2) { 
      let x = document.getElementById("rollfile").style; 
      setTimeout(() => x.transform = 'translateY(-200px)', 200); 
    } 
    //console.log("f lv : " + flag2); 
  } 
   
  let opt = document.querySelectorAll("#rollfile div"); 
   
  opt.forEach(function(){ 
    this.onclick = function(e){ 
      flag2 = false; 
      // скрывает после клика на пункт меню 
      //if (!flag2) { // скрывает если вы выбран пункт меню и покинут фокус 
      //let x = document.getElementById("rollfile").style; 
      //setTimeout(() => x.transform = 'translateY(-200px)', 200); 
    } 
     
  }); 
   
}());

html, 
body { 
  height: 100%; 
  overflow: hidden; 
} 
 
body { 
  margin: 0px; 
  font-size: 3em; 
  letter-spacing: 1px; 
  background-color: white; 
} 
 
.topmenu { 
  display: grid; 
  grid-gap: 0px; 
  grid-template-columns: repeat(5, 1ft); 
  grid-template-rows: repeat(1, 1fr); 
  font-size: 0.5em; 
  text-align: center; 
} 
 
.topmenu div:nth-child(-n+4):hover { 
  border: 1px solid black; 
  color: red; 
} 
 
.file { 
  z-index: 5; 
  width: 20vw; 
} 
 
.rollfile { 
  position: fixed; 
  border-top: 1px solid black; 
  margin: 0 0 0 0; 
  font-size: 0.5em; 
  height: 10h; 
  width: 20vw; 
  text-align: center; 
  transform: translateY(-200px); 
  z-index: 0; 
  transition: 0.7s; 
} 
 
.rollfile div:nth-child(-n+4):hover { 
  background-color: black; 
  color: #00FF03; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
</head> 
 
<body> 
  <div class="topmenu"> 
    <div class="file" id="file">File</div> 
  </div> 
 
 
  <div class="rollfile" id="rollfile"> 
    <div class="start" id="start">Start</div> 
    <div class="open" id="open">End</div> 
  </div> 
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script> 
</body> 
 
</html>

Answer 2

(function() { 
  var flag2 = true; 
 
  document.getElementById("file").onmouseenter = function() { 
    let x = document.getElementById("rollfile").style; 
    x.transform = 'translateY(0px)'; 
  } 
 
  document.getElementById("rollfile").onmouseleave = function() { 
    flag2 = true; 
  } 
 
  let ele1 = document.querySelectorAll(".option"); 
 
  ele1.forEach(function() { 
    this.onclick = function() { 
      if (flag2 === true) { 
        let x = document.getElementById("rollfile").style; 
        setTimeout(() => x.transform = 'translateY(-200px)', 200); 
      } 
    }; 
  }); 
}());

html, 
body { 
  height: 100%; 
  overflow: hidden; 
} 
 
body { 
  margin: 0px; 
  font-size: 3em; 
  letter-spacing: 1px; 
  background-color: white; 
} 
 
.topmenu { 
  display: grid; 
  grid-gap: 0px; 
  grid-template-columns: repeat(5, 1ft); 
  grid-template-rows: repeat(1, 1fr); 
  font-size: 0.5em; 
  text-align: center; 
} 
 
.topmenu div:nth-child(-n+4):hover { 
  border: 1px solid black; 
  color: red; 
} 
 
.file { 
  z-index: 5; 
  width: 20vw; 
} 
 
.rollfile { 
  position: fixed; 
  border-top: 1px solid black; 
  margin: 0 0 0 0; 
  font-size: 0.5em; 
  height: 10h; 
  width: 20vw; 
  text-align: center; 
  transform: translateY(-200px); 
  z-index: 0; 
  transition: 0.7s; 
} 
 
.rollfile div:nth-child(-n+4):hover { 
  background-color: black; 
  color: #00FF03; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
</head> 
 
<body> 
  <div class="topmenu"> 
    <div class="file" id="file">File</div> 
  </div> 
 
 
  <div class="rollfile" id="rollfile"> 
    <div class="option" id="start">Start</div> 
    <div class="option" id="open">End</div> 
  </div> 
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script> 
</body> 
 
</html>