0

Bom dia, me desculpem se já existir resposta para minha pergunta aqui na comunidade, é que estou criando um "painel" offline para utilização aqui na empresa, porém certas coisas não estão dando muito certo. Vocês podem ver como está ficando pelo JSFiddle http://jsfiddle.net/elenderg/2wwh1x2f/embedded/html,css,result/

Neste painel existem uma série de botões com links para acesso, tanto à direita quanto à esquerda. Os botões da direita funcionam normalmente quando a largura da tela é um pouco reduzida, mas basta ampliar que o efeito hover e a funcionalidade dos links desaparece. Porque isto acontece?

1 Resposta 1

1

Pelo que pude perceber do seu código, o problema não está no redimensionamento da tela, mas sim no fato de que a sua regra de :hover não atinge nenhum seletor. Explico:

Nesta resposta eu falo um pouco sobre pseudo-seletores. Obviamente, o foco da resposta é outro, mas eu a cito pelo fato de que :hover também é um pseudo-seletor. De maneira simplista, o :hover entra em ação quando você passa o mouse em cima de alguma coisa. Veja:

.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>

Assim sendo, todas as ocorrências da classe .button, no evento hover, vão receber as propriedades definidas dentro do pseudo-seletor.

Acontece que, no seu código, a sua regra :hover não esta relacionada à nenhuma tag existente. Reduzindo o seu problema, para facilitar um pouco o entendimento, temos o seguinte 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>

Veja que agora o :hover funciona, pois alterei o seletor ao qual ele se refere. O seu código original não continha nenhuma classe .btn para que o :hover pudesse funcionar. Assim sendo, alterei o seletor para [name="btn"]:hover e [name="btn2"]:hover pois, curiosamente, todos os botões possuem no atributo name o que eu suponho que deveria ser a classe. Perceba que você está usando o atributo name erroneamente.

Mesmo que a alteração que eu propus funcione e resolva o seu problema, eu sugiro fortemente que você altere o seu HTML para o uso correto do atributo name, e faça as suas regras de :hover usando classes.

3
  • tudo bem, mas porque ao redimensionar a tela o hover funcionava? 9/09/2016 às 13:25
  • eu removi o seguinte código do meu css: .main-container { float: left; position: relative; left: 45%; } .fixer-container { float: left; position: relative; left: -110%; } o hover funcionou normalmente, mas com ele não funciona... 9/09/2016 às 13:31
  • No código que você postou, nenhum hover funciona, com ou sem redimensionamento de janela, mesmo retirando os snippets que você mencionou. Recomendo a leitura desse link para que você consiga exemplificar melhor o seu problema, e assim chegar na causa. 9/09/2016 às 13:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .