How to make the hover overlap a div with overflow

Question

How to make the hover overlap a div with overflow

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have a certain div that holds the boxes, and this div is with overflow:hidden , so I wanted to open another div with a margin negative both bottom and top , so there the suspended div did not appear of the way expected by overflow:hidden , then I tried with js also did not work very well

<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;
}

That way it did not work, so I tried with js

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

Anyone know of a way to fix?

javascript css

asked by anonymous 24.08.2018 / 12:35

2 answers

Repeat action every few seconds #PHP Input appear with two numbers after the comma

score 1 · Answer 1

Friend, it will not work. The% d of% is with display none, so in no way will .ler appear, so it appears you need to hover the mouse inside the% d .suspensa , as it is with display none, you do not have what you pass the mouse and nothing happens. You have to think of another logic. For example:

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

score 1 · Answer 2

Dude I only know one way to make a child element (actually a pseudo-element) extrapolate the size of the element that is overflow:hidden . Even though I already say that I do not consider this a practical option, because the alignments need to be done individually ...

See that I created a ::after in .filho and in this after I used position:absolute , but to work you can not put position:relative in element .filho that complicates things because you lose reference This is the problem with this technique, but to make it easier I put position:relative in the container parent outside, so the alignment of ::after of element .filho com positions: absolute fica relativo a esse .pai com position: relative '

It seems a little confusing, right? but see the code for you to understand better.

OBS: Note that alignments need to be done individually, so I said that it is not very practical and responsive ... But it is a way to extrapolate 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>