because the Hover does not overlap the div

Asked

Viewed 230 times

0

I have a problem I think very simple. But I’ve done everything and nothing solves, as you can see in the print div who is with the hover she doesn’t stand on top of the div pai http://prntscr.com/isgxqp what I could do?

The div info_perfil is with a left:-100px, but she’s not getting on top of the div pai and she’s with the z-index: 9999

CSS:

    ul {
       list-style: none;
    }
    ul li {
       position: relative;
       float: left;
    }
    #right {
        float: right;
        box-sizing: border-box;
        padding: 5px 5px;
        width: 220px;
        height: 100%;
        background-color: rgba(255,255,255,0.9);
    }
    #right .usuario_content {
        width: 100%;
        height: 422px;
        overflow: auto;
    }
    #right .usuario_content ul li {
        width: 100%;
        height: 40px;
        border-bottom: 1px dashed rgba(0,0,0,0.4);
    }
    #right .usuario_content ul li:last-child {border: none;}
    #right .usuario_content ul li a {
        position: absolute;
        padding: 0 0 0 40px;
        width: 100%;
        height: 40px;
        text-align: left;
        font-size: 13px;
        box-sizing: border-box;
        z-index: 9;
    }
    #right .usuario_content ul li:hover a {
        background-color: rgba(0,0,0,0.1);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    #right .usuario_content ul li ul li .info_perfil {display: none;}
    #right .usuario_content ul li:hover ul li .info_perfil {
        top: -37px;
        left: -110px;
        display: block;
        z-index: 9999;
        width: 250px;
        height: 250px;
        background: #ccc;
    }

HTML:

<div id="right">
<div id="Principal" class="usuario_content" style="display:block;">
   <ul>
      <li id="">
         <img src="fotos/1.jpg" class="avatar align_left" border="0"/>
         <a href="#" id="" class="comecar">Amanda Ferreira</a>
         <span id="" class="status on absolute"></span>
         <strong class="absolute">Aqui vem o status da pessoa legal</strong>
         <ul>
            <li><div class="info_perfil absolute"></div></li>
         </ul>
      </li>
      <li id="">
         <img src="fotos/1.jpg" class="avatar align_left" border="0"/>
         <a href="#" id="" class="comecar">Amanda Ferreira</a>
         <span id="" class="status on absolute"></span>
         <strong class="absolute">Aqui vem o status da pessoa legal</strong>
         <ul>
            <li><div class="info_perfil absolute"></div></li>
         </ul>
      </li>                                                    
   </ul>
</div>
</div>
html css css-hover

  • I didn’t understand. From the print, the div is above everything.

  • the intention is to get her out of the div pai make it pop, got it ? give a left: -110px

  • I don’t get it. What do you mean "pop"?

  • that she takes a left: -110px to be above all div http://prntscr.com/ish5fc she’s taking the left only that it does not burst the div pai

  • I still don’t understand. I think I’m missing code in the question. There’s not even div #chat and #right. It’s incomplete.

  • there is my whole structure, I will edit the question

  • I edited the question, if I change the value of position: absolute; for position: fixed; it works only that I lose the position: relative; of my li

  • What class is this: absolute?

  • .absolute {position: absolute;}

  • Pq -110px? You cannot decrease this value so that the div does not go too far left?

  • my intention is exactly this, that she went totally to the left, as if she were not inside the div pai only the more I send to the left the more it disappears, it’s not above the pai in this example print best what I wish to do http://prntscr.com/ishlzp

  • Now I get it. You won’t be able to do that. The overflow limits all child elements within the father div. What comes out of it is hidden. What you have to do is review the structure.

  • Or use javascript for this.

  • Unless you pull the overflow

  • then I lose the scroll, I’ll try to make a gambiarra, if I can’t I put here what I tried to do

Show 10 more comments

2 answers

3

Hello, Bruno!

I think I understand what you mean, I tried to put the code together, I hope that’s about it:

Complete Code

ul {
       list-style: none;
    }
    ul li {
        width: 350px;
    }
    .lista-hover {
        padding: 0;
        background: #444444;
        position: relative;
        top: -95px;
    }
    .lista-hover li {
        padding: 0;
    }
    .dados-pessoa h4,span {
        margin-left: 0.5em;
    }

    #right .usuario_content ul li ul li .info_perfil {display: none;}
    #right .usuario_content ul li:hover ul li .info_perfil {
        color: white;
        display: block;
        z-index: 9999;
        width: 350px;
        height: 200px;
    }
<div id="right">
    <div id="Principal" class="usuario_content">
           <ul>
               <li class="dados-pessoa">
                <h4> <img src="a.png"/> Amanda </h4>
                <span> Status da Pessoa</span> 
                <!--  hover -->
                <ul class="lista-hover">
                    <li><div class="info_perfil">
                        <h5>Texto texto texto</h5>
                    </div></li>
                 </ul>
               </li>
               <!-- fim info 1 -->

               <li class="dados-pessoa">
                <h4> <img src="a.png"/> Amanda </h4>
                <span> Status da Pessoa</span> 
                <!--  hover -->
                <ul class="lista-hover">
                    <li><div class="info_perfil">
                        <h5>Texto texto texto</h5>
                    </div></li>
                 </ul>
               </li>
           </ul>
        </div>
</div>

Well, I’ve removed a lot of stuff from your default code and CSS as well. I created only one class and set the attributes in it.

No result when you hover (Hover), he will play the next li down, because it’s set inside the li previous.

You can change that structure, I tried to keep yours.

I hope it helped you!

0

Reading the question and the comments I believe something like this you need.

I had to use jQuery to control the block of content that appears floating next to the menu. I didn’t exactly use your code so this is just an ok example.

I made a menu inside a container with overflow, but you can show and hide elements that are outside of it!

Look at the example: (Obs: if you want it to work as in :hover, just put .hover where is .click in the <script>)

$(".menu-item").click(function(event){
            event.preventDefault();
            $(this).toggleClass("ativo").siblings().removeClass("ativo");
            var id = $(this).attr("href");
            $(id).toggleClass("show").siblings().removeClass("show");
        });
<style>
    
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.dir {
    position: absolute;
    right: 0;
    top: 20px;
    width: 200px;
    height: 230px;
    background-color: gray;
    overflow-y: auto;
}

.dir a {
    text-indent: 0;
    border-bottom: 1px dotted black;
    text-align: center;
    line-height: 50px;
    height: 50px;
    width: 100%;
    background-color: bisque;
    color: brown;
    text-decoration: none;
    display: inline-block;
    transition: all 250ms;
}
.dir a:hover {
    color: black;
    font-weight: bold;
    background-color: rgb(248, 198, 138);
    cursor: pointer;
}
.item {
    position: absolute;
    z-index: 999999;
    right: 220px;
    top: 20px;
    width: 200px;
    height: 100px;
    background-color: silver;
    text-align: center;
    font-size: 32px;
    font-family: sans-serif;
    opacity: 0;
    transition: all 250ms;
}
.ativo {
    color: black !important;
    font-weight: bold;
    background-color: rgb(248, 198, 0) !important;
}
.show {
    opacity: 1;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<aside>
    <div class="dir">
        <nav>
            <a class="menu-item" href="#id1">Itens 1</a>
            <a class="menu-item" href="#id2">Itens 2</a>
            <a class="menu-item" href="#id3">Itens 3</a>
            <a class="menu-item" href="#id4">Itens 4</a>
            <a class="menu-item" href="#id5">Itens 5</a>
            <a class="menu-item" href="#id6">Itens 6</a>
        </nav>
    </div>

    <div id="id1" class="item">Item 1</div>
    <div id="id2" class="item">Item 2</div>
    <div id="id3" class="item">Item 3</div>
    <div id="id4" class="item">Item 4</div>
    <div id="id5" class="item">Item 5</div>
    <div id="id6" class="item">Item 6</div>
</aside>

  • very good example, but it did not work, I do not know what was wrong

  • As I told this example to work it needs to have a certain order in HTML tags, because CSS needs this order to work. As I said, it’s just an example that you can take the idea and adapt in your project. If you have any other questions, take what you already have and ask a new question with the other question.

Browser other questions tagged html css css-hover

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