Let me illustrate the issues I am facing.
The concept involves splitting a webpage into two sections, with the left side utilizing CSS transitions and the right side displaying the actual content.
Example 1:
In this example, I have a gray image filling the entire left side, which turns completely transparent on mouse-over to reveal a clearer menu. However, the links (in this case, "Test") are supposed to have mouse-over transitions as well, but they do not work because the image is covering the text, thus preventing the mouse-over event from registering. I attempted to resolve this by exploring "pointer-events," which allows selecting text behind the image, but this prevented the transitions from triggering on the image itself since it was set as a pointer-event.
To attempt a solution, I experimented with using :hover::before, resulting in:
Example 2:
In this variation, the link and foreground transition both function correctly; however, the foreground no longer overlays the text links.
I hope this clarifies the situation,
Code Snippet 1:
<div id="left"> <img src="graysmall.png" name="img" width="93" height="55" id="img" /> <h2>B</h2> <h3><a href="../index.html">Test</a></h3> </div> <div id="right"> <a href="../index.html">Scroll</a><br /> Scroll <br /> (continues) </div>
Code Snippet 2:
<div id="left"> <h2>B</h2> <h3><a href="../index.html">Home</a></h3> </div> <div id="right"> <br />Scroll <br /> (continues) </div>