Click here to Skip to main content
14,423,188 members
Rate this:
Please Sign up or sign in to vote.
See more:
I had been using a :hover to show and not show some directions. My problem was that when you hovered anywhere on the entire row that the text was on

it got activated.

So I inputted some Bootstrap with "offsets" so that the area to the sides of the text would not activate the :hover function. But this move

deactivated the :hover function entirely. I am wondering if anyone can think of a workaround for this issue. Thanks.

If the id is inside next to the p it no longer works as it did without the Bootsrap.
  <pre><div class="container-fluid" id="Directions">

    <div class="d-flex justify-content-center">

        <div class="col-offset-1 col-5 col-md-offset-4 col-md-4 col-lg-offset-5 col-lg-3 col-xg-offset-5 col-xl-2">
                <p>Show Directions</p>

What I have tried:

I have tried moving the ID to different spots but if the :hover works it only works for the whole row.
Updated 13-Jan-20 0:58am
Richard Deeming 9-Jan-20 14:48pm
We seem to be missing some important parts of your code. Where's the CSS for the :hover rule? And which element is being shown or hidden?
Kornfeld Eliyahu Peter 13-Jan-20 5:58am
What is wall of column? It's border? How exactly you try to distinguish the column (div) from its wall (border)?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100