Is there a way to make a hidden p element appear when hovering over the first visible element in a tree structure? I found some help on Stack Overflow suggesting the use of adjacent sibling selectors, and while it works well with a simple example, it fails when there are too many elements between the two elements that need to sync.
#smart:hover ~ p#first {
display: inline;
}
#first {
left: -450px;
top: 100px;
display:none;
}
http://codepen.io/sietedosfede/pen/gdLiB
The issue arises when attempting to place these two elements next to each other, causing the CSS of the tree to break.
I'm wondering if there is a rule or method to ignore the middle elements between the two target elements.
Regardless, I'm not sure if this is the best approach to achieving this. Thank you in advance, GRiS.