I just think about the ul and li tags why fill all possible width

HTML-CSS
1

https://jsfiddle.net/h0stcydr/

Like this fill the all remain space at width. Is can be set somehow? I mean just green background for entered text and not at all?

Thanks.

2

You could wrap the text in a <span> element, then set the background for that.

3

I got an answer some day ago with this. Social icons working fine. But about same my problem if hover on that line where icons have is also activate the hover effect on icon: https://jsfiddle.net/sLfcy510/ and how can make that is do only when only hover on icon? I mean without that line not affect when hover in it? Line is with green background so that also activate hover effects.



Just try understand at all.

Thank you.

4

How about if you moved the styles from .div_plus_social:hover > ul > li to .div_plus_social > ul > li:hover? The page will always trigger the opacity(50%) filter whenever you hover over the green area because of those styles.

1 Like
5

Don’t you need the hover to be on a parent container like it was for this effect to work?

It shouldn’t really be a problem as long as you make the ul the container and only have it be as wide as it needs to be.
https://codepen.io/anon/pen/vwqNJr

1 Like
6

You are a pro about logic. :stuck_out_tongue: :sunny: