because the hover does not overlap the div

Question

because the hover does not overlap the div

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

I have a problem I think is quite simple. But I already did everything and nothing solves, as you can see in print div that is with hover it does not stay on div pai link what could I do?

The% div of% is with info_perfil , but it is not getting over left:-100px and it has div pai

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

asked by anonymous 17.03.2018 / 15:21

2 answers

How to execute a function after ajax success? mkdir (): No such file or directory - Laravel

score 3 · Answer 1

Hello, Bruno!

I think I understood what you meant, tried to assemble the code, I hope it goes something like this:

Full 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 your default and CSS code as well. I created a single class and set the attributes in it.

In the result when you hover , it will play the next li down because it is set inside the li above.

You can change this structure, I've tried to keep yours.

I hope I have helped you!

score 0 · Answer 2

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

I had to use jQuery so I can control the block of content that appears floating next to the menu. I did not exactly use your code for this is just an ok example.

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

Look at the example: ( obs: ) if you want it to work as in :hover , just put .hover where .click em>

$(".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><divclass="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>