When hover over text it highlights "ul & li problem"

You mean if you hover on the box containing the text, you don’t see the hover effect, but if the cursor is on the actual text, you do see it? (I think it’s better UX to hover the whole box.)
You are applying the hover pseudo class to the li which is the containing box, not the span which contains only the text.
But because the span is set to display block, it fills the box anyway, so maybe you don’t want display block.
I assume this will become a nav with anchors. Usually you would apply the hover to the anchors, they may replace the spans.

You are styling the span using ‘ul li span’ but when you style .note you just use .note and therefore due to specificity the inline-block rule is not applied. You need to apply the same weight to the rule.

I guess you are after something like this:

 ul li span.note {
        display:inline-block;
        vertical-align:top;
        border: 2px solid #73AD21;
        padding:0 10px;
        margin:10px 0;
    }
   ul li span  .note:hover {
        color: #fff;
    }

No widths or heights needed and I also removed the top and bottom padding assuming that you only want the text to be hovered and not the padding (but of course that makes it harder to target with the mouse or touch).

I guess I took too much time trying to get rid of magic numbers, even though I still do not know exactly what the OP wants. "What he says and what his code demonstrated are different.

This is a demo with the OPs magic numbers. The text color has been changed slightly so it is a little more visible. There is a property to render the text color invisible when the li is hovered but the text is not… seems pointless to me but it was in his code.

I suggest that the OP try this and tell us what is wrong with the behavior.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/when-hover-over-text-it-highlights-ul-li-problem/238043
jimmygary
Sep 28,2016 6:45 AM
-->
    <style type="text/css">

html {
    box-sizing:border-box;
}
*,*:before,*:after {
    box-sizing:inherit;
}
body, html {
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
    font-family:"Ubuntu Condensed", serif;
} 
ul li,
ul li span:last-child {
    transition:all 500ms; 
    -webkit-transition:all 500ms;
}
aside {
    width:200px; 
    background:#111; 
    height:100%;  
}
ul {
    counter-reset:li;
    padding:0; 
    margin:0; 
}
ul li {
    list-style:none; 
    border-bottom: 1px solid #555; 
    color:#777; 
    position:relative; 
    overflow:hidden;
}
/* This deletes the text color when li is hovered but not over the text.  It was in your code... */
ul li:hover {
    color:transparent;   
}
ul li span {
    display:block;
    position:relative;
    padding:10px;         
}
ul li span:first-child {
    display:inline-block;
    min-width:5em;
    z-index:2;
    border:2px solid #73ad21;
}
ul li span:first-child:before {
    content:"Nr. " counter(li);
    counter-increment:li;
    padding-right:.75em;
}
ul li span:last-child {
    padding:0;
    display:block;
    background:#ff6600;
    z-index:1;
    position:absolute;
    top:0;
    left:-300px;
    bottom:0;
    width:305px;
}
ul li:hover > span:last-child {
    left:195px;
}
ul li span:first-child:hover {
    color:#fff;
}
    </style>
</head>
<body>

<aside>
    <ul>
        <li><span>Home</span><span></span></li>
        <li><span>About</span><span></span></li>
        <li><span>Portfolio</span><span></span></li>
        <li><span>Contact</span><span></span></li>
    </ul>
</aside>
<script>
</script>

</body>
</html>

I think this can be written without the empty span.

Paul and Ron, you just made a perfect solutions for my pains:) Thanks guys, you resolved what I was struggling 23 posts ago:)
This is what I was expecting:

Finally. Sorry to be so s l o w …

This gets rid of the magic numbers in the orange slider and the empty span.

Tested in FF and Chrome; not tested in IE.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/when-hover-over-text-it-highlights-ul-li-problem/238043
jimmygary
Sep 28,2016 6:45 AM
-->
    <style type="text/css">

html {
    box-sizing:border-box;
}
*,*:before,*:after {
    box-sizing:inherit;
}
body, html {
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
    font-family:"Ubuntu Condensed", serif;
} 
aside {
    width:300px; 
    background:#222; 
    height:100%;  
}
ul {
    list-style:none; 
    counter-reset:li;
    padding:0; 
    margin:0; 
}
ul li {
    border-bottom: 1px solid #555; 
    color:#666; 
    position:relative;  /* */
    overflow:hidden;
}
ul li::before {
    content:"";
    box-sizing:content-box;
    display:block;
    width:100%;
    background:#ff6600;
    position:absolute;
    top:0;
    bottom:0;
    left:-100%;
    margin-left:6px;
}
ul li:hover::before {
    left:100%;
    margin-left:-6px;
}
ul li::before {
    -webkit-transition:all 500ms;
    transition:all 500ms; 

}
ul li span {
    display:inline-block;
    min-width:5em;
    border:2px solid #73ad21;
    padding:10px; 
    position:relative;        
    z-index:2;
}

ul li span:before {
    content:"";
    display:inline-block;
    content:"Nr. " counter(li);
    counter-increment:li;
    padding-right:8px;
}

ul li span:hover {
    color:#fff;
    display:inline-block;
}

    </style>
</head>
<body>

<aside>
    <ul>
        <li><span>Home</span></li>
        <li><span>About</span></li>
        <li><span>Portfolio</span></li>
        <li><span>Contact</span></li>
    </ul>
</aside>
<script>
</script>

</body>
</html>

Comments anyone? @SamA74, @PaulOB?

overflow:auto maybe needed on aside in case the content is larger than the viewport :slight_smile:

1 Like

Thanks! Never crossed my mind

Errrrrrr…

Internal vertical scrollbar? Really?

What about aside {min-height:100%} instead?

I assumed it was eventually going to be a fixed sidebar.:slight_smile:

Yes that’s ok but it all depends on what the dynamics of the layout are?

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.