0

Tenho uma determinada div que segura as box, e essa div esta com overflow:hidden, ai eu queria abrir outra div com uma margin negativa tanto bottom quanto top, so que ai a div suspensa nao apareceu da forma esperada pelo overflow:hidden, ai tentei com js também não deu muito certo

<div id="box"><!--div com overflow-->

     <div id="ler" class="ler">
        <div class="suspensa">Conteudo hover 01</div>
     </div>

     <div id="ler" class="ler">
        <div class="suspensa">Conteudo hover 02</div>
     </div>

<div>

#box{
   width:100%;
   width:250px;
   overflow:hidden;/*overflow*/
}

.ler{
   width:150px;
   height:250px;
   background-color:#ebebeb;
}
.ler .suspensa{display:none;}
.ler:hover .suspensa{
   display:block;
   position:absolute;
   bottom:-250px;/*margin negativa, a div suspensa nao mostra por causa do overflow na div box*/
   width:250px;
   height:150px;
   background-color:#f4f4f4;
}

desse jeito nao deu muito certo, ai tentei com js

$("#ler").hover(function(){
    (".suspensa").show();
});

alguem sabe alguma maneira de arrumar ?

2
  • Mayron sua pergunta tá muito confusa cara, detalhe melhor o que quer fazer.
    – LeAndrade
    Commented 24/08/2018 às 12:26
  • @LeAndrade dei umas explicacoes melhor, oque eu preciso e que a div suspensa apareca normal mesmo com a div pai com overflow, oque nao acontece so com css, entendeu ?
    – goio
    Commented 24/08/2018 às 12:45

2 Respostas 2

1

Amigo, não vai dar certo. A div .ler está com display none, então de nenhuma forma a .suspensa vai aparecer, pra mesma aparecer é preciso passar o mouse dentro da div .ler, como ela está com display none, não tem o que você passar o mouse e nada acontece. Você tem que pensar em outra lógica. Por exemplo:

.suspensa{
    display: none;
}

.box{
    display: flex;
}

.ler {
    width: 170px;
    height: 170px;
    display: flex;
    margin: 5px;
    border: 1px solid;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.ler:hover .suspensa {
    display:block;
    padding: 20px;
    border: 1px solid;
}
<div id="box" class="box"><!--div com overflow-->

     <div id="ler" class="ler">
        <div class="suspensa">Conteudo hover 01</div>
     </div>

     <div id="ler" class="ler">
        <div class="suspensa">Conteudo hover 02</div>
     </div>

<div>

1
  • sim foi falta de atençao da minha parte, oque eu preciso e que a div suspensa tenha uma margin negativa pra baixo ou pra cima, estourando a div pai, no caso a box que esta com overflow, e isso nao funciona so com css
    – goio
    Commented 24/08/2018 às 12:41
1

Cara eu só conheço uma forma de fazer um elemento "filho" (na verdade é um pseudo-elemento) extrapolar o tamanho do elemento que está overflow:hidden. Mesmo assim já digo logo que não considero isso uma opção prática, pois os alinhamentos precisam ser feitos individualmente...

Veja que eu criei um ::after no .filho e nesse after eu usei position:absolute, mas para funcionar vc não pode colocar position:relative no elemento .filho isso complica as coisa pq vc perde a referencia do alinhamento, esse é o problema dessa técnica, porém pra facilitar eu coloquei position:relative no container pai que está por fora, dessa forma o alinhamento do ::after do elemento .filho compositions:absolutefica relativo a esse.paicomposition:relative`

Parece meio confuso a explicação né. mas veja o código para vc entender melhor.

OBS: Repare que os alinhamentos precisam ser feitos na mão individualmente, por isso falei que não é muito prático e responsivo... Porém é uma forma de extrapolar o overflow:hidden...

.pai {
  position: relative;
  border: 1px solid;
  display: flex;
  box-sizing: border-box;
}
.filho {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid;
  margin: 50px;
  box-sizing: border-box;
}
.filho:hover::after {
  content: "";
  position: absolute;
  top: 35px;
  left: 35px;
  width: 130px;
  height: 130px;
  background-color: #f00;
}
.filho:nth-child(2)::after {
  left: 285px;
}
<div class="pai">
  <div class="filho">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. E
  </div>
  <div class="filho">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. E
  </div>
</div>

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 .