Links are not working

Asked

Viewed 35 times

0

I have three links, which go to different pages, only the links Tape Location and Disk Location, nor change the effect when I hover the mouse over and do not go to defined page when I click, already the Back button is working correctly

@charset "UTF-8";

@font-face {
  font-family:"lobster";
  src: url("font/Lobster-Regular.ttf");
}

* {
  box-sizing: border-box;
}


html,body {
  margin:0;
  padding:0;
  background: white;
}

.container {
  width:97%;
  max-width:1300px;
  min-width:1295px;
  margin: 0 auto;
  background: white;
  box-shadow: 0px 0px 40px #6C7A89;
}

header {
  position: relative;
  background-image: linear-gradient(to bottom, #22A7F0, #3A539B 35%);
  width:100%;
  height:130px;
}

.nome-empresa {
  position:absolute;
  top:20px;
  left:400px;
  font-family:lobster;
  font-size:85px;
  color:#E4F1FE;
}

.logo {
  position:absolute;
  bottom:-20px;
  right: 450px;
}

.link-navegacao:hover {
  color:#19B5FE;
}

.link-navegacao {
  text-decoration:none;
  font-size:25px;
  font-family:"Arial Black";
  color:#E4F1FE;
}

.titulo-fita {
  text-align: center;
  font-size:45px;
  font-family:lobster;
  color:#4183D7;
  text-shadow:2px 2px 2px black;
  display:block;
  margin-bottom:50px;

}

.painel-fita {
  width:650px;
  height:200px;
  position: relative;
  top:120px;
  left:300px;
  margin-top:2px;
}

.botoes {
  margin:10px auto;
  width:250px;
  height:50px;
}

.btn-gran {
  width:240px;
  height:36px;
}

.btn-link {
  text-decoration:none;
  border-radius:3px;
  color:#E4F1FE;
  font-weight:bold;
  text-align: center;
  display:block;
  font-size:19px;
  padding:8px;
}

.btn-voltar {
  background:#00B16A;
  border:1px solid #00B16A;
}

.btn-prosseguir {
  background:#1F3A93;
  border:1px solid #1F3A93;
}

.btn-link:hover {
  color:#F89406;
}

.btn-link:active {
  box-shadow: 3px 3px 15px #6C7A89;
}
<!DOCTYPE html>

<html lang="pt-BR">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/locacao-midia.css">
  <link rel="icon" type="image/png" href="img/iconVintage.png">
  <title>Locação</title>

</head>

<body>

  <div class="container">

    <header>
      <span class="nome-empresa">Locação</span>
      <figure class="logo">
        <img src="img/locacao.png" alt="Locação">
      </figure>
    </header>

    <section>

      <div class="painel-fita">
        <span class="titulo-fita">Selecione um tipo de Locação</span>
      </div>

      <div class="botoes">
        <a href="view_locacao_fita.php" class="btn-link btn-prosseguir btn-gran">Locação de Fita</a>
      </div>
      <div class="botoes">
        <a href="view_locacao_disco.php" class="btn-link btn-prosseguir btn-gran">Locação de Disco</a>
      </div>
      <div class="botoes">
        <a href="view_locacao.php" class="btn-link btn-voltar btn-gran">Voltar</a>
      </div>
    </section>

  </div><!--Fim da Div container -->

</body>

</html>

html css

1 answer

2


Your div .painel-fita is blocking your links.

Try:

.painel-fita {
    pointer-events: none;
}

EDIT

You can also solve by decreasing the height of your div that is covering your links.

  • that’s right, I didn’t even realize, vlw

  • Nothing! I’m glad you decided! :)

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.