Why does the Hover effect stop working on these css buttons when I resize the screen?

Question

Good morning, excuse me if there is already answer to my question here in the community, is that I am creating an "offline panel" for use here in the company, but certain things are not working very well. You can see how it’s getting by Jsfiddle http://jsfiddle.net/elenderg/2wwh1x2f/embedded/html,css,result/

In this panel there are a series of buttons with links to access, both right and left. The buttons on the right usually work when the width of the screen is slightly reduced, but just zoom in that the effect Hover and the functionality of the links disappear. Why does this happen?

Answer 1

As far as I could tell from your code, the problem is not the resizing of the screen, but the fact that your :hover does not hit any selector. I explain:

In this answer I talk a little bit about pseudo-selectors. Obviously, the focus of the answer is different, but I quote it from the fact that :hover is also a pseudo-selector. In a simplistic way, the :hover comes into action when you hover over something. See:

.button{
  padding: 1em;
  background-color: aqua;
  width: 5em;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.5s ease;
}

.button:hover{
  background-color: green;
  color: white;
 }

<div class="button">Hover me!</div>

Therefore, all occurrences of the class .button, at the event Hover, will receive the properties defined within the pseudo-selector.

Turns out, in your code, your rule :Hover is not related to any tag existing. Reducing your problem, to facilitate a little understanding, we have the following snippet:

body {
  font-family: verdana;
  background-color: black;
  color: white;
}

.div1 {
  font-size: 30px;
  float: left;
  width: 360px;
  height: auto;
  margin: 10px;
  padding: 10px;
}

.div2 {
  float: right;
}

.btn-style {
  border: solid 2px #0354f7;
  border-radius: 0px 10px 50px 4px;
  moz-border-radius: 0px 10px 50px 4px;
  -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  font-size: 30px;
  color: #ffffff;
  padding: 5px 17px;
  background-color: #006fff;
  cursor: pointer;
  padding: 5px 40px 5px 20px;
}

.btn2 {
  border: solid 2px #0354f7;
  border-radius: 4px 0px 0px 50px;
  moz-border-radius: 4px 0px 0px 50px;
  -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  font-size: 30px;
  color: #ffffff;
  padding: 5px 17px;
  background-color: #006fff;
  cursor: pointer;
  padding: 5px 40px 5px 20px;
}

[name="btn"]:hover, [name="btn2"]:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
  cursor: pointer;
}

<div class="div1 style=" text-align: left; font-family: verdana; font-size: 30px;>
  <p>
    <a href="C:/CBA" target="_blank">
      <input type="button" name="btn" class="btn-style" value="CBA" />
    </a>
  </p>
  <p>
    <a href="C:/CBA" target="_blank">
      <input type="button" name="btn" class="btn-style" value="AIC" />
    </a>
  </p>
  <p>
    <a href="C:/CBA" target="_blank">
      <input type="button" name="btn" class="btn-style" value="CIRCULARES" />
    </a>
  </p>
  <p>
    <a href="C:/CBA" target="_blank">
      <input type="button" name="btn" class="btn-style" value="FORMULÁRIOS" />
    </a>
  </p>
  <p>
    <a href="C:/CBA" target="_blank">
      <input type="button" name="btn" class="btn-style" value="FOLHETOS" />
    </a>
  </p>
  <p>
    <a href="C:/CBA" target="_blank">
      <input type="button" name="btn" class="btn-style" value="ANEXOS ICA 53-2" />
    </a>
  </p>
  <p>
    <a href="C:/CBA" target="_blank">
      <input type="button" name="btn" class="btn-style" value="ANEXO ICA 63-10" />
    </a>
  </p>
</div>
<div class="div2" style="text-align: right;  font-family: verdana; font-size: 30px;">
  <p>
    <a href="C:/CBA" target="_blank">
      <input type="button" name="btn2" class="btn2" value="TCA" />
    </a>
  </p>
  <p>
    <a href="C:/CBA" target="_blank">
      <input type="button" name="btn2" class="btn2" value="RCSV" />
    </a>
  </p>
  <p>
    <a href="C:/CBA" target="_blank">
      <input type="button" name="btn2" class="btn2" value="RPA" />
    </a>
  </p>
  <p>
    <a href="C:/CBA" target="_blank">
      <input type="button" name="btn2" class="btn2" value="ROTAER" />
    </a>
  </p>
  <p>
    <a href="C:/CBA" target="_blank">
      <input type="button" name="btn2" class="btn2" value="AIP MAP" />
    </a>
  </p>
  <p>
    <a href="C:/CBA" target="_blank">
      <input type="button" name="btn2" class="btn2" value="AIP BRASIL" />
    </a>
  </p>
  <h2><a href="C:/CBA" target="_blank"><input type="button" name="btn2" class="btn2" value="SUPLEMENTO AIP" /></a></h2>
</div>

See that now the :hover works because I changed the selector it refers to. Its original code contained no class .btn so that the :hover could work. So I changed the dial to [name="btn"]:hover and [name="btn2"]:hover because, interestingly, all buttons have in the attribute name what I suppose should be the class. Realize that you are using the attribute name erroneously.

Even if the change I proposed works and solves your problem, I strongly suggest that you change your HTML to the correct use of the attribute name, and make your rules of :hover using classes.