CODEWITHSUNDEEP
css
Louis93
Louis93

Reputation: 3923

My li:hover does not react as expected?

Here's a Fiddle

The element normally has an underline. I want for that underline to be completely hidden when the mouse is anywhere in the opaque "cloud" that appears when the cursor is over the element.

The underline is applied as a border-bottom of the parent div as shown below:

.element_style{
    width:98%;
    line-height:40px;
    font-family: 'Lato';
    font-weight: 300;
    font-size:18px;

    /*Order at the bottom*/
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);   

    position:relative;
}

However you will notice that if you go down slowly in the element, to just below where the underline should be, you will notice the underline appear again like so enter image description here

I was unable to fix this behaviour, how can I approach going about doing so?

Upvotes: 1

Views: 69

Answers (1)

Danield
Danield

Reputation: 125473

You want to remove the border from the .element_style element when you hover over the (parent) .unremovable element.

So do this:

.unremovable:hover .element_style{
    border:none;
}

Updated FIDDLE

Upvotes: 3

Related Questions