1

So, I was just making some tests for a little menu idea. The idea is just to have a little dot in the top left corner of the screen. When overing it will have a box shadow that make it look bigger, on click it will expand (width: 100%, height: 100%), after that a hidden div of the same color will show up. And this will open the menu, by clicking the close button (CHIUDI) the menu will close, but then the hover property of the dot in the corner of the screen will no longer work.
I think this happen because I'm using JavaScript to modify CSS rules, and when I use the function to close the menu i will set the box-shadow to 0.
Probably this is the problem, because I think that this affect the :hover CSS property.
Is there anyway to fix this by using pure JavaScript? (No jQuery).

Here is the code:

<html>

<head>
  <title>Design Tests</title>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Raleway:200');
    #button {
      position: fixed;
      width: 50px;
      height: 50px;
      background-color: blue;
      border-radius: 25px;
      transition-duration: 500ms;
      z-index: 1;
      cursor: pointer;
    }
    
    #button:hover {
      box-shadow: 0px 0px 0px 30px rgba(0, 0, 255, 1);
    }
    
    #menu_container {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: rgba(0, 0, 255, 1);
      z-index: 0;
      visibility: hidden;
    }
    
    #menu {
      transition-duration: 500ms;
      opacity: 0;
    }
    
    #close_menu {
      color: white;
      font-family: raleway;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="button" onclick="openMenu()"></div>
  <div id="menu_container">
    <div id="menu">
      <center>
        <h1 id="close_menu" onclick="closeMenu()">CHIUDI</h1>
      </center>
    </div>
  </div>
  <script>
    function openMenu() {
      document.getElementById('button').style.boxShadow = '0px 0px 0px 100em rgba(0,0,255,1)';
      setTimeout(showMenu, 500);
    }

    function showMenu() {
      document.getElementById('menu_container').style.visibility = 'visible';
      document.getElementById('menu_container').style.zIndex = '2';
      document.getElementById('menu').style.opacity = '1';
    }

    function closeMenu() {
      document.getElementById('menu').style.opacity = '0';
      setTimeout(hideMenu, 400);
    }

    function hideMenu() {
      document.getElementById('menu_container').style.visibility = 'hidden';
      document.getElementById('menu_container').style.zIndex = '0';
      document.getElementById('button').style.boxShadow = '0px 0px 0px 0px rgba(0,0,255,1)';
    }
  </script>
</body>

</html>

-UPDATE-

I tried to use the CSS !important property, but it won't work. Use the !important rules means that JavaScript won't affect that rules (if I'm right), but JavaScript need to edit that because he need to use box-shadow for make the animation itself.
Basically, using !important in the box-shadow hover rules, I will fix this bug, but when I'll open the menu I won't more see the animation.

Improve this question
1
  • Sorry for any english grammatical error. Commented Oct 3, 2017 at 21:04

2 Answers 2

Reset to default
1

When you apply style using JS it becomes inline style and it have more priority then :hover. You may add important to the :hover like this :

<html>

<head>
  <title>Design Tests</title>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Raleway:200');
    #button {
      position: fixed;
      width: 50px;
      height: 50px;
      background-color: blue;
      border-radius: 25px;
      transition-duration: 500ms;
      z-index: 1;
      cursor: pointer;
    }
    
    #button:hover {
      box-shadow: 0px 0px 0px 30px rgba(0, 0, 255, 1)!important;
    }
    
    #menu_container {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: rgba(0, 0, 255, 1);
      z-index: 0;
      visibility: hidden;
    }
    
    #menu {
      transition-duration: 500ms;
      opacity: 0;
    }
    
    #close_menu {
      color: white;
      font-family: raleway;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="button" onclick="openMenu()"></div>
  <div id="menu_container">
    <div id="menu">
      <center>
        <h1 id="close_menu" onclick="closeMenu()">CHIUDI</h1>
      </center>
    </div>
  </div>
  <script>
    function openMenu() {
      document.getElementById('button').style.boxShadow = '0px 0px 0px 100em rgba(0,0,255,1)';
      setTimeout(showMenu, 500);
    }

    function showMenu() {
      document.getElementById('menu_container').style.visibility = 'visible';
      document.getElementById('menu_container').style.zIndex = '2';
      document.getElementById('menu').style.opacity = '1';
    }

    function closeMenu() {
      document.getElementById('menu').style.opacity = '0';
      setTimeout(hideMenu, 400);
    }

    function hideMenu() {
      document.getElementById('menu_container').style.visibility = 'hidden';
      document.getElementById('menu_container').style.zIndex = '0';
      document.getElementById('button').style.boxShadow = '0px 0px 0px 0px rgba(0,0,255,1)';
    }
  </script>
</body>

</html>

but a better idea is to use classes and toggle them with JS like this :

function openMenu() {
  document.getElementById('button').className="open";
  setTimeout(showMenu, 500);
}

function showMenu() {
document.getElementById('menu_container').className="show";
document.getElementById('menu').style.opacity = '1';
}

function closeMenu() {
  document.getElementById('menu').style.opacity = '0';
  setTimeout(hideMenu, 400);
}


function hideMenu() {
document.getElementById('menu_container').className="";
  document.getElementById('button').className="";
}
@import url('https://fonts.googleapis.com/css?family=Raleway:200');
#button {
  position: fixed;
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 25px;
  transition-duration: 500ms;
  z-index: 1;
  cursor: pointer;
}
#button.open {
box-shadow: 0px 0px 0px 100em rgba(0,0,255,1);
}

#button:hover {
  box-shadow: 0px 0px 0px 30px rgba(0, 0, 255, 1);
}

#menu_container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 255, 1);
  z-index: 0;
  visibility: hidden;
  opacity:0;
}
#menu_container.show {
visibility: visible;
z-index:2;
opacity:1;
}

#menu {
  transition-duration: 500ms;
  opacity: 0;
}

#close_menu {
  color: white;
  font-family: raleway;
  cursor: pointer;
}
<html>

<body>
  <div id="button" onclick="openMenu()"></div>
  <div id="menu_container">
    <div id="menu">
      <center>
        <h1 id="close_menu" onclick="closeMenu()">CHIUDI</h1>
      </center>
    </div>
  </div>
</body>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I have done that, the problem is that JavaScript use that important property to make the open menu animation, if I add important, I would fix the problem, but then I would have a new problem. How can I make the animation again? I have tried by changing the div dimension, but the animation won't come out as good looking as this. Any other ideas?
@Zero i updated my answer with an alternative solution ;)
Can I use JavaScript DOM to make :hover properties? That would solve the problem.
no, as with JS you add inline style to element and :hover is a state of an element and will not be a valid selector
my second solution is more suitable as it allow to add/remove classes so you won't have any trouble with inline-style and it will make it easy for you to dissociate JS and CSS
|
0

I created this answer more as a self challenge, but was able to achieve the hover effects using just javascript. You can remove the :hover from css and create a function that can be called onmouseenter and onmouseout. here is the function:

function hoverDot() {
  document.getElementById('button').style.boxShadow = '0px 0px 0px 0px rgba(0,0,255,0)';
  document.getElementById('button').onmouseout = function(){
    document.getElementById('button').style.boxShadow = '0px 0px 0px 0px rgba(0,0,255,0)';
  } 

  document.getElementById('button').onmouseenter = function(){
    document.getElementById('button').style.boxShadow = '0px 0px 0px 30px rgba(0,0,255,1)';
  }
}


hoverDot(); //intially call hover function

function openMenu() {
  document.getElementById('button').style.boxShadow = '0px 0px 0px 100em rgba(0,0,255,1)';
  setTimeout(showMenu, 500);
}

function showMenu() {
  document.getElementById('menu_container').style.visibility = 'visible';
  document.getElementById('menu_container').style.zIndex = '2';
  document.getElementById('menu').style.opacity = '1';
}

function closeMenu() {
  document.getElementById('menu').style.opacity = '0';
  document.getElementById('button').style.boxShadow = '0px 0px 0px 100em rgba(0,0,255,1)';
  setTimeout(hideMenu, 400);
  setTimeout(hoverDot, 400); //Called function here
}

function hideMenu() {
  document.getElementById('menu_container').style.visibility = 'hidden';
  document.getElementById('menu_container').style.zIndex = '0';
  document.getElementById('button').style.boxShadow = '0px 0px 0px 0px rgba(0,0,255,1)';
}

function hoverDot() {
  document.getElementById('button').style.boxShadow = '0px 0px 0px 0px rgba(0,0,255,0)';
  document.getElementById('button').onmouseout = function(){
    document.getElementById('button').style.boxShadow = '0px 0px 0px 0px rgba(0,0,255,0)';
  } 

  document.getElementById('button').onmouseenter = function(){

    document.getElementById('button').style.boxShadow = '0px 0px 0px 30px rgba(0,0,255,1)';
  }

}
<html>

<head>
  <title>Design Tests</title>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Raleway:200');
    #button {
      position: fixed;
      width: 50px;
      height: 50px;
      background-color: blue;
      border-radius: 25px;
      transition-duration: 500ms;
      z-index: 1;
      cursor: pointer;
    }
    
    #menu_container {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: rgba(0, 0, 255, 1);
      z-index: 0;
      visibility: hidden;
    }
    
    #menu {
      transition-duration: 500ms;
      opacity: 0;
    }
    
    #close_menu {
      color: white;
      font-family: raleway;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="button" onclick="openMenu()"></div>
  <div id="menu_container">
    <div id="menu">
      <center>
        <h1 id="close_menu" onclick="closeMenu()">CHIUDI</h1>
      </center>
    </div>
  </div>
</body>

</html>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.