2

Tenho 4 elementos <div> onde elas possuem um componente que só é exibido quando o usuário passa o mouse sobre a <div> container (esta que possui class="thumbanil") porem quando passo o mouse sobre o conteúdo oculto o mesmo fica visível, este comportamento não deveria acontecer pois onde fica o conteúdo oculto esta posicionado a outra <div> container (esta que possui class="thumbanil").

Como deveria ficar: O conteúdo que está oculto deverá ser exibido somente quando o mouse passar sobre a <img> thumbnail e permanecer visível em quanto o mouse estiver sobre a <div> container (esta que possui class="thumbanil").

O que já fiz (mas não funcionou): Fiz com que o elemento oculto só ficasse visível quando o mouse passa-se sobre o thumbnail porém assim que o mouse saia do thumbnail para entrar no conteúdo oculto o conteúdo oculto (agora visível) voltava a ficar oculto, logo voltei ao esta anterior do código.

Código HTML:

                <div class="col-md-8 section span7 text-center">
                    <div class="thumbnail">
                        <img src="assets/images/projetos/thumbnail.png" alt="Site Pessoal">
                        <div class="caption">
                            <p><strong>Site</strong></p>
                            <p>
                                <a href="#" class="btn btn-info gray gly_medium" id="site-imagens" title="Veja imagens">
                                    <span class="glyphicon glyphicon-search"></span>
                                </a>
                                <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
                                    <span class="glyphicon glyphicon-link"></span>
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="thumbnail">
                        <img src="assets/images/projetos/thumbnail.png" alt="Video Site">
                        <div class="caption">
                            <p><strong>Video Content Site</strong></p>
                            <p>
                                <a href="#" class="btn btn-info gray gly_medium" id="video-imagens" title="Veja Imagens">
                                    <span class="glyphicon glyphicon-search"></span>
                                </a>
                                <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
                                    <span class="glyphicon glyphicon-link"></span>
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="thumbnail">
                        <img src="assets/images/projetos/thumbnail.png" alt="Video Site">
                        <div class="caption">
                            <p><strong>Video Site</strong></p>
                            <p>
                                <a href="#" class="btn btn-info gray gly_medium" id="video-imagens" title="Veja Imagens">
                                    <span class="glyphicon glyphicon-search"></span>
                                </a>
                                <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
                                    <span class="glyphicon glyphicon-link"></span>
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="thumbnail">
                        <img src="assets/images/projetos/thumbnail.png" alt="Video Site">
                        <div class="caption">
                            <p><strong>Video Site</strong></p>
                            <p>
                                <a href="#" class="btn btn-info gray gly_medium" id="video-imagens" title="Veja Imagens">
                                    <span class="glyphicon glyphicon-search"></span>
                                </a>
                                <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
                                    <span class="glyphicon glyphicon-link"></span>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>

Código CSS:

.thumbnail{
    display:inline-block
}

.caption{
    opacity:0; 
    transition:opacity .5s;
    position:absolute;
    background-color:#fff;
    width:308px;
    margin-left:-5px
}

.thumbnail:hover .caption{ 
    opacity:1; 
    z-index:1
}

Imagem que demonstra o defeito: A seta vermelha esta no lugar do mouse, note que o mouse esta (aparentemente) em cima do thumbnail da <div> abaixo porem está realmente em cima do caption. inserir a descrição da imagem aqui

Exemplo no FIDDLE, gerado pelo user @IsraelSousa.

12
  • Consegues reproduzir isto num jsFiddle? não vejo nenhuma div container no teu HTML.
    – Sergio
    Commented 5/06/2015 às 13:16
  • a div container é esta com class="thumbanil" irei ser mais especifico na pergunta.
    – Ricardo
    Commented 5/06/2015 às 13:20
  • Não entendi muito bem o que você quer fazer, testei aqui em um jsfidle e está funcionando da forma que você quer se é o que entendi. jsfiddle.net/hk3ynf0p Commented 5/06/2015 às 13:21
  • O hover está aparecendo enquanto você está com o mouse posicionado sobre o item. Commented 5/06/2015 às 13:22
  • 1
    @Sergio, já havia validado a solução do Fernando quase no mesmo instante, poste sua resposta para que possa lhe ar os 10 pontos de rep. e para que outros users a vejam no futuro.
    – Ricardo
    Commented 5/06/2015 às 14:06

2 Respostas 2

3

Problema

O que está acontecendo é que ao utilizar opacity, para esconder/exibir o elemento, ele só está ficando transparente (opacity: 0) e não está saindo da view, então ele continua ocupando seu espaço na tela, sendo assim ao passar o mouse na parte superior da imagem abaixo, o :hover é considerado na <div class="thumbnail"> superior, pois ela está naquela área.

Solução

O que você pode fazer é trocar a forma de esconder/exibir o elemento de opacity para display (display: block; = visível e na view e display: none; = invisível e fora da view), assim o elemento quando invisível não ocupara espaço na tela não sendo considera para o evento :hover em seu parent. Ficando algo similar a isso:

.caption{
    display: none; /* trocado de opacity */
    transition:opacity .5s; /* dessa forma essa transition não funcionaria */
    position:absolute;
    background-color:#fff;
    width:308px;
    margin-left:-5px
}

.thumbnail:hover .caption{ 
    display: block; /* trocado de opacity */
    z-index:1
}

Exemplo online jsFillde.

[Edit 1] (Solução melhor aplicando somente o :hover sobre a img)

Há uma forma que achei o resultado melhor utilizando visibility como sugerido na resposta do @Sergio, e aplicando o :hover apenas a imagem (img), pois nas soluções anterior se você fosse sobre a imagem, e fosse descendo até o caption (div.caption), ele continuava sendo exibido, mesmo que o mouse já estivesse fora da image, pois ele estava sobre o thumbnail (div.thumbnail), onde estava o evento :hover.

Então está solução consiste em:

  • Adicionar o evento hover apenas a image (img);
  • Aplicar o estilo do hover ao seu próximo elemento irmão;
  • Manter o efeito do transction;

Sendo o seguinte:

.thumbnail {
  display: inline-block
}
.caption {
  opacity: 0;
  visibility: hidden;
  transition: opacity 3s;
  /* aumentei o tempo para poder ser visto o transaction */
  position: absolute;
  background-color: #fff;
  width: 308px;
  margin-left: -5px
}
img:hover +.caption {
  opacity: 1;
  visibility: visible;
  z-index: 1
}
<div class="thumbnail">
  <img src="http://davidnaylor.org/temp/thunderbird-logo-200x200.png" alt="Site Pessoal" />
  <div class="caption">
    <p><strong>Site</strong>
    </p>
    <p>
      <a href="#" class="btn btn-info gray gly_medium" id="site-imagens" title="Veja imagens">
        <span class="glyphicon glyphicon-search"></span>
      </a>
      <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
        <span class="glyphicon glyphicon-link"></span>
      </a>
    </p>
  </div>
</div>
<div class="thumbnail">
  <img src="https://upload.wikimedia.org/wikipedia/en/7/71/Quebec_citadelles_200x200.png" alt="Video Site" />
  <div class="caption">
    <p><strong>Video Content Site</strong>
    </p>
    <p>
      <a href="#" class="btn btn-info gray gly_medium" id="video-imagens" title="Veja Imagens">
        <span class="glyphicon glyphicon-search"></span>
      </a>
      <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
        <span class="glyphicon glyphicon-link"></span>
      </a>
    </p>
  </div>
</div>
<div class="thumbnail">
  <img src="http://horoscopo.ego.globo.com/img/horoscopo.ego.globo.com/icones/signos/gemeos-g.png" alt="Video Site" />
  <div class="caption">
    <p><strong>Video Site</strong>
    </p>
    <p>
      <a href="#" class="btn btn-info gray gly_medium" id="video-imagens" title="Veja Imagens">
        <span class="glyphicon glyphicon-search"></span>
      </a>
      <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
        <span class="glyphicon glyphicon-link"></span>
      </a>
    </p>
  </div>
</div>
<div class="thumbnail">
  <img src="http://horoscopo.ego.globo.com/img/horoscopo.ego.globo.com/icones/signos/cancer-g.png" alt="Video Site" />
  <div class="caption">
    <p><strong>Video Site</strong>
    </p>
    <p>
      <a href="#" class="btn btn-info gray gly_medium" id="video-imagens" title="Veja Imagens">
        <span class="glyphicon glyphicon-search"></span>
      </a>
      <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
        <span class="glyphicon glyphicon-link"></span>
      </a>
    </p>
  </div>
</div>

Exemplo online jsFiddle.

2
  • +1, mas se o problema é ocupar espaço na tela, eu acho que o ideal era fazer height: 0, width: 100% e overflow: visible pra fazer o elemento sempre “visível” (ainda que transparente) sem ocupar espaço.
    – user25930
    Commented 5/06/2015 às 13:47
  • Sim @ctgPi, há varias alternativas, para ocultar um elemento da view, só tem que ver qual a mais adequada para a situação. E da forma que coloquei a transaction que havia não funcionará mais. Mas há alternativas para mante-lá de forma diferente. Commented 5/06/2015 às 13:51
2

Outra solução para além do que o Fernando sugeriu é adicional visibility pois assim evita sobreposição de elementos quando o Browser tentar perceber qual o elemento sobre o qual está a pairar (hover).

Assim juntando visibility: hidden; à classe sem :hover e visibility: visible; à classe com :hover também soluciona o problema.

jsFiddle: https://jsfiddle.net/hk3ynf0p/2/

1
  • Correto, e como disse em outro comentário: ainda há varias outras opções para esconder/exibir um elemento com css, que funcionariam para esse cenário. É questão de verificar a que melhor se adequá ao cenário da aplicação. =D Commented 5/06/2015 às 14:16

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 .