CODEWITHSUNDEEP
javascripthtmlcss
Anton van der Wel
Anton van der Wel

Reputation: 451

closing a box with mousehover

I created this box. I want this box to open when I hover my mouse over the part that is still visible. Now when I hover my mouse nothing happens. I think the error must be the JS file. Calling the function goes okay because if put for example an

alert("test")

in the close box function everything works except the box.

HTML:

<div class="box" onmouseover="boxclose();">
  <h4 class="AlarmHeader"> Alarm Times!</h4>
</div>

CSS:

.box{
  height: 150px; width: 400px;
  background-color:black;
  border-radius: 20px 20px 0 0;
  padding: 5px;
  position:fixed;
  bottom:-100px;
  right:5px;

JS:

function boxclose() {
  document.getElementsByClassName("box").style.bottom="0px"
}

Useful link: https://www.w3schools.com/cssref/pr_pos_bottom.asp

Upvotes: 0

Views: 64

Answers (4)

Risa__B
Risa__B

Reputation: 462

You dont need javascript there, you can do that with css, too i will add a transition, try the following:

.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
transition:all .8s cubic-bezier(1,.65,1,.61);
}
.box:hover {
bottom:0;
}
<div class="box">
  <h4 class="AlarmHeader"> Alarm Times!</h4>
</div>

Upvotes: 2

Rohan
Rohan

Reputation: 467

Hello If i Properly understand you then please try this.

.box-popup {padding: 5px 10px; border:1px solid #ddd; position:relative;}
.box-popup span {display: none;}
.box-popup:hover span {display: block; padding: 10px; width: 200px; height: 100px; border:1px solid #eee; position: absolute; left:0; top: 30px;}
<div class="box-popup">
  Hover
  <span>
    Hover Data
  </span>
</div>

Upvotes: 1

Saravanan I
Saravanan I

Reputation: 1229

If i'm not wrong changing your js file like this will work,

function boxclose() {
  document.getElementsByClassName("box")[0].style.bottom="0px"
}

Upvotes: 1

freginold
freginold

Reputation: 3956

You're using getElementsByClassName, which returns a list instead of one element, so you just need to tell it which element to target:

document.getElementsByClassName("box")[0].style.bottom="0px"

Working example:

function boxclose() {
  document.getElementsByClassName("box")[0].style.bottom="0px"
}
.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
<div class="box" onmouseover="boxclose();">
  <h4 class="AlarmHeader"> Alarm Times!</h4>
</div>

Upvotes: 2

Related Questions