You may have noticed that while we are using CSS in our html , we use “+” and “~” symbols to select another div on hovering on a particular div. The reason why we are using them is because on hovering over one div we have to change or hover contents over another div.
But some times we have to use “+” or sometimes “~” . Then what is the need of this.
“+” is used when we need to effect hover over an element that comes adjacent to the div where we need to hover on.
But this didn’t work when the hover effect is needed to be for a div that is not adjacent to the div.
So we use “~” for making this effect.
syntax: span:hover ~ .className.
span:hover + .className
nb : make sure that both these are used when we need effect on the div outside where we are actually hovering. If we are hovering in the same div we can use “.” simply.