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">
            <di>
                <p>Show Directions</p>
            </di>
        </div>
    </div>
</div>


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.
Posted
Updated 13-Jan-20 0:58am
v2
Comments
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