0

Estou terminando um projeto, mas tive um pequeno problema. Na página existe um "botão" onde é feito o download de um documento. Mas ao passar o mouse por cima, ou até mesmo clicar, nada acontece, é como se fosse um elemento qualquer, menos um link (href=).

inserir a descrição da imagem aqui

Vejam: http://passagemfranca.ma.gov.br/diario-oficial/publicacao/9diario-oficial.html

Ao passar o mouse por cima, deveria ocorrer um movimento, como NESTE EXEMPLO.


PARTE DO CABEÇALHO:

<div class="faixaCinza">
<div style="
    display: flow-root;
    background: #1a7ed4;
    padding: 40px 80px;
    padding-bottom: 140px;
">
<div style="
    max-width: 980px;
">    
<div style="
    display: inline-flex;
    float: left;
    margin-top: 35px;
">
    <span style="
    display: grid;
    line-height: 1000px;
    text-align: left;
">
<h3 style="padding-top:10px;color: #FFF;font: bold 30px 'Roboto';display: block;padding: 0;margin: 0;">Diário Oficial do Município</h3>
<span style="padding-top:10px;color: #FFF;font: bold 18px 'Roboto';display: block;">A edição número 2459 de 28 de julho de 2017 já está disponível.</span>
</span>
    </div>
    <a href="/arquivos/diario/DOM-1634-certificado.pdf" class="download" target="_blank">
            <img class="icon-pdf" src="https://diario.famem.org.br/app/themes/jornal/assets/imgs/pdf-icon.png" alt="Edição 1.634">
            <span>
                <span>Edição 1.634</span>
                <span><time datetime="00:00">13 julho 2017</time></span>
                <span class="btn btn-danger btn-md" role="button">Baixar edição</span>
            </span>
        </a>
    </div>
</div>
</div>
11
  • 1
    O problema é que a div class conteudo de alguma forma esta sobrepondo sua imagem Commented 13/07/2017 às 20:16
  • 1
    Em modelo.css, na linha 70, na classe .faixaCinza remova o position: relative; Commented 13/07/2017 às 20:17
  • 1
    Parece que a classe .faixaCinza está com o z-index negativo, isso está quebrando. Se tirar o z-index, ele já volta a funcionar. Commented 13/07/2017 às 20:19
  • 1
    Se as de baixo resolverem o problema, pode votar em uma delas :) remover o position:relative pode quebrar a sua pagina dependendo do tamanho da tela, o ideal seria procurar outra solução. Commented 13/07/2017 às 20:28
  • 1
    Tem certeza que esse deveria ser o comportamento esperado? i.sstatic.net/ALEnR.gif Commented 13/07/2017 às 20:35

2 Respostas 2

1

Altera o css de modelo.css para esse:

body {
    padding: 0px;
    margin: 0px;
    width: 100%;

    background: #f9f9f9; /* Old browsers */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */
}
body > center > span > a{display: none;}
a {
    text-decoration: none; 
}
/* -- -- TOPO -- -- */

.faixaVerde {
    background-color: #00052b;
    width: 100%;
}

.faixaVerde .conteudo {
    width: 1000px;
    padding: 20px 0px 20px 0px;
    height: 110px;
}

.faixaVerde .logo {
    float: left;
    width: 300px;
}

.faixaVerde .nomeTopo {
    float: right;
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    letter-spacing: -1px;
    height: 100%;
    font-weight: bold;
}

.faixaVerde .nomeTopo .instituicao{
    float: right;
    font-size: 26px;
    line-height: 30px;
}

.faixaVerde .nomeTopo .cidade{
    width: 100%;
    text-align: right;
    float: right;
    font-size: 45px;
    line-height: 45px;
    letter-spacing: -2px;
}

.faixaAmarela{
    background-color: #ffeb00;
    width: 100%;
    position: relative;
    min-height: 20px;
}

.faixaCinza {
    position: relative;
    z-index: 999;
    /* height: 120px; */
    width: 100%;
    background: #1a7ed4; /* Old browsers */
    /* background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); */
    background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
    /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); */ /* Chrome,Safari4+ */
    /* background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); */ /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
    /* background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); */ /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */
    /* display: table; */
    margin-bottom: -200px;
}

/* -- --  -- -- */

body .conteudo {
    width: 980px;
    position: relative;
    z-index: 1001;
}

/* -- -- MENU -- -- */

.menu {
    width: 100%;
    height: 180px;
    text-align: center;
    margin: -60px 0px 50px 0px;
    text-align: center;
    position: relative;
    z-index: 1;
    display: none;
}

.menu .caixa {
    display: inline-block;
    padding: 5px;
    cursor: pointer;
}

.menu .caixa .bolha {
    width: 70px;
    height: 70px;
    padding: 15px;
    border: solid 1px #CCC;
    border-radius: 50%;

    background: #f9f9f9; /* Old browsers */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */
    -moz-box-shadow: 0px 0px 40px #CCC;
    -webkit-box-shadow: 0px 0px 40px #CCC;
    box-shadow: 0px 0px 40px #CCC;
}

.menu .caixa:hover .bolha{
    -moz-box-shadow: 0px 0px 50px #bcbcbc;
    -webkit-box-shadow: 0px 0px 50px #bcbcbc;
    box-shadow: 0px 0px 50px #bcbcbc;
}

.menu .caixa #verde {
    background: #008291; /* Old browsers */
    background: -moz-linear-gradient(top, #008291 0%, #00555e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008291), color-stop(100%,#00555e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #008291 0%,#00555e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #008291 0%,#00555e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #008291 0%,#00555e 100%); /* IE10+ */
    background: linear-gradient(to bottom, #008291 0%,#00555e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008291', endColorstr='#00555e',GradientType=0 ); /* IE6-9 */
}

.menu .caixa .bolha img {
    width: 50px;
}

.menu .caixa span {
    color: #4D4D4D;
    font-family: 'Oswald', sans-serif;
    letter-spacing: -1px;
    font-size: 20px;
}

.menu .caixa:hover span{
    text-shadow:0px 0px 20px #CCC;
}


/* -- -- */

.conteudo .caixaTexto {
    width: 80%;
    color: #4D4D4D;
    text-align: justify;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 18px;
}

h3 {
    color: #4D4D4D;
    font-family: 'Roboto', sans-serif;
    letter-spacing: -1px;
    font-size: 25px;
    text-align: left;
}

.filtro {
    font-family: Arial, sans-serif;
    border: solid 1px #bcbcbc;
    background-color: #fff;
    padding: 10px;
    text-align: left;
    margin-bottom: -1px;
    margin-top: 100px;
}

.filtro select {
    padding: 5px;
}

table {
    width: 100%;
    border: solid 1px #ccc;
    background-color: #fff;
    font-family: 'Roboto', sans-serif;
    line-height: 18px;
    text-align: center;
    font-weight: bolder;
    color: #505050;
}

table thead tr {
    background: #f9f9f9; /* Old browsers */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */
}

table thead th {
    font-weight: bold;
    border: solid 1px #ccc;
    padding: 5px;
}

table tbody td {
    border: solid 1px #ccc;
    padding: 5px 30px;
}

.even {background: #BEE8ED;}
.even:hover {background: #A3DAE0;}
.odd {background: #F9F9F9;}
.odd:hover {background: #E9E9E9;}

tbody tr:nth-child(even) {background: #f1f1f1;}
tbody tr:nth-child(even):hover {background: #e0e0e0;}
tbody tr:nth-child(odd) {background: #ffffff;}
tbody tr:nth-child(odd):hover {background: #feffef;}

.paginacao {
    border: solid 1px #bcbcbc;
    background-color: #fff;
    padding: 10px;
    text-align: left;
    margin-top: -1px;
}

.paginacao span {
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #4D4D4D;
    padding: 5px;
    margin: 5px 2px 5px 0px;
    cursor: pointer;
    border: solid 1px #e6e6e6;

    background: #f9f9f9; /* Old browsers */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */

}
.download{float:right;width: 290px;background:#fff;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-transition:transform 500ms ease;-moz-transition:transform 500ms ease;transition:transform 500ms ease;font: bold 16px 'Roboto';} .download > span{width: 130px;padding:20px 10px 0 10px;text-align:center;float:right;} .download span > span{display:block;line-height:130%;font-size:1.1em;color:#666;font-weight: bold;} .download .btn{margin:5px 0 0 0;color:#fff;background: #dc4642;padding: 8px;border-radius: 5px;} .download .icon-pdf{width:120px;height:120px;background:#ecf0f1;-webkit-border-radius:10px 0 0 10px;-moz-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;padding:10px;float:left} .download:hover{-webkit-transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg);-moz-transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg);-o-transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg);-ms-transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg);transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg)}

Se remover somente o elemento z-index: -1; de .faixaCinza ele vai sobrepor a div .conteudo. Eu ajustei esse css para que fique certo.

1
  • Muito obrigado pelo auxílio @EGDEV =D Commented 13/07/2017 às 20:28
1

O problema é que você colocou um z-index com valor negativo:

.faixaCinza {
    position: relative;
    z-index: -1; /* <<-- Problema */
    height: 120px;
    width: 100%;
    background: #1a7ed4;
    /* ... */
}

Com isso você jogou o elemento "por baixo" dos outros, ou seja, as outras div's estão por cima do teu link. Basta remover a propriedade z-index: -1 ou colocar outro valor maior como z-index: 0 ou z-index: 1 que ele funcionará normalmente.

1
  • Muito obrigado Kadu, mas desta forma a barra azul sobrepõe a tabela, eu queria que a faixa azul ficasse como está, única diferença que os links funcionem =) Commented 13/07/2017 às 20:32

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 .