html – css3 family tree hover not works correctly when add div tag inside li-ThrowExceptions

Exception or error:

I am trying to modify the css3 family tree so that when the user clicks on the panel a drop-down menu appears. To add the menu, I am moving the <a> tag within <div class = "dropdown">.

After this, when I hover the cursor over the box, the CSS effects are only applied in the current box and not in the children. I’ve been modifying the original CSS to try to make it work:

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li div a:hover, 
.tree li div:hover+ul li div a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li div a:hover+ul li div a::after, 
.tree li div a:hover+ul li div a::before, 
.tree li div a:hover+ul::before, 
.tree li div a:hover+ul ul::before{
    border-color:  #94a0b4;
}

It’s works but the problem is size of div box it’s bigger than tag and when the mouse is near of tag the effects applies.

Original css:

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, 
.tree li a:hover+ul li a {
    background: #c8e4f8; 
    color: #000; 
    border: 1px solid #94a0b4;
}

/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
    border-color:  #94a0b4;
}

How could it be fixed?

How to solve:

inline-block – by the width of the content, block (default for <div>) – by the width of the parent:

div.dropdown { display: inline-block; }

Just don’t change the original CSS:

/*Connector styles on hover*/
.tree li div:hover+ul li::after, 
.tree li div:hover+ul li::before, 
.tree li div:hover+ul::before, 
.tree li div:hover+ul ul::before{
    border-color:  #94a0b4;
}

Leave a Reply

Your email address will not be published. Required fields are marked *