CSS action when hovering

FKlusmann · January 10, 2023, 3:42pm

Hi. Thanks for reading:
I am trying to develope a standard page header. On the right side I have 6 “linkboxes”. I would like to have them change background color and font color when hovering over any of them. “Home” works as I wish. It has no anchor (<a>).

Problem 1: The others only work when the anchor (<a>) has the cursor over the text portion.

Link 3 is a pulldown menu.

Problem 2: When activated, it pushes everything down. I would like it to open on top of whatever is below it without pushing down.

Thank you. I’ll check back tomorrow.
– Fred

<!DOCTYPE html> <!-- ./HTML/test230108.html -->
<html lang="en-US">
  <head>
		<meta charset = "UTF-8">
		<meta name="viewport"    content="width=device-width, initial-scale=1.0">
    <title>TestMenu-230108</title>
    <style>
      /* reset */
      html, body, ul, li {
        box-sizing: border-box; 
        margin: 0; 
        padding: 0;
        vertical-align: baseline;
      }
      table {
        position: fixed;
        border: 1px solid black; /* I want to see it */
        width: 100%;
      }
      td {
        border: 1px solid black; /* */
      }
      .h {
        margin-top: 10px; 
        margin-left: 80px; 
        font-size: 28pt; 
        font-family: 'Canela Regular'; 
        font-style: italic; 
        font-weight: normal; 
        text-align: center; 
      }
      nav {
        display: flex;
        flex-wrap: wrap;
      }
      .linkbox {
        width: 70px;
        min-height: 20px;
        line-height: 20px;
        font-family: monospace;
        font-weight: bold;
        text-align: center;
        background-color: #d0f0f0;
        color: black;
        border: 2px solid white; 
        box-sizing: border-box;
        cursor: pointer;
      }
      .linkbox:hover {
        background-color: #0000FF;
        color: #ffff00;
      }
      .linkbox a{
        text-decoration: none; /* remove link underline */
      }
      .linkbox ul li {
        list-style: none; /* remove list bullets */
      }
      /* Hide children navs. */
      .linkbox ul li {       /* Hide children navs. */
        background-color: #d0f0f0;;
        color: black;
        overflow: hidden;
        height: 0;
      }
      .linkbox a:hover {
        background-color: #0000FF;
        color: #ffff00;
      }
      .linkbox:hover > ul > li {
        overflow: visible;
        background-color: #0000FF;
        color: #ffff00;
        height: 20px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td rowspan="2" style="height:80px; width:80px;"> Logo</td>
        <td style="height: 40px;" class="h">Page Title</td>
        <td style="float: right; vertical-align: text-top;">
          <nav>
            <div class="linkbox">
              <a>Home</a>
            </div>
            <div class="linkbox">
               <a href="#">Link-2</a>
            </div>

            <div class="linkbox">
              <a href="#">link-3</a>
               <ul>
                <li><a href="#">link-3-a</a></li> 
                <li><a href="#">link-3-b</a></li>
               </ul>
            </div>

            <div class="linkbox">
              <a href="#">Link-4</a>
            </div>
            <div class="linkbox">
              <a href="#">Link-5</a>
            </div>
            <div class="linkbox">
              <a href="#">Link-6</a>
            </div>

          </nav>
        </td>
      </tr>
      <tr>
        <td colspan="2" class="h" style="height: 25px; font-size: 15pt" >Some random remarks.</td>
      </tr>
    </table>
  </body>
</html>

bbsmooth · January 10, 2023, 7:49pm

For problem 1, it’s because the text for the link only changes when you hover over the link, but the link doesn’t fill the entire square. You should make the a element fill the entire linkbox div so that way when your mouse is over that square it is always hovering the a element.

For problem 2, you’ll most likely want to use absolute positioning on the list.

FKlusmann · January 10, 2023, 8:51pm

Thank you, Bruce @bbsmooth.

I filled the text with:

            <div class="linkbox">
               <a href="#">Link-2&nbsp;&nbsp;&nbsp;</a>
            </div>

which caused an overflow to a new line. This did not help. The text needed to be hovered over.
I tried adding position: absolute; as well as others to .linkbox without any luck.

FKlusmann · January 10, 2023, 9:02pm

Note that both:

<div class="linkbox">
        <a>Home</a>
 </div>

and

<div class="linkbox">
       Test
</div>

work. Hovering anywhere inside the “linkbox” changes the colors.
It is with the href=“something” that this fails for me.

bbsmooth · January 10, 2023, 9:02pm

Ahh, that’s not the method I would use to make the link take up the entire space of the div. By default an a element will only take up as much space as needed because it is known as an inline element. Block elements on the other hand will take up as much space as they can, in other words, they will fill out their parent container. So I would change the a element into a block level element. You can do this using the CSS display property.

FKlusmann · January 10, 2023, 9:07pm

I tried

.linkbox a{
        text-decoration: none; /* remove link underline */
        display: block;

without luck.

bbsmooth · January 10, 2023, 9:12pm

Well, I’m not sure what to tell you. Using a copy of your codepen, I just added display: block to that rule set and it worked for me. Also, I would recommend you get rid of border on .linkbox and find another way to add space between the menu items.

Please try again and make sure you save your codepen so I can see your changes.

FKlusmann · January 11, 2023, 12:53am

Thanks, Bruce @bbsmooth .
Codepen holds my latest version. I am making progress, thanks to you.
I can squeeze down and the .linkboxes will stack as I wish.

I changed .linkbox with:

        display: block;
        border: 1px solid black;
        margin: 2px;

which helps. I kept the modified border and added margin to make the .linkboxes look more like buttons.

While not exactly what I had hoped, It will work!

Of course, I an opened to other ideas to accomplish this goal.
Thanks again.

– Fred

bbsmooth · January 11, 2023, 1:00am

This is looking pretty good (at least problem 1). Just a few things to consider:

There is no reason to add display: block to the .linkbox div as divs are block level by default. There’s no real harm adding it. It just isn’t doing anything for you and having unnecessary code is usually seen as bad.
You still have a very minor issue with your hover color changes. Since the border on the .linkbox div is 1px and you are changing the background color to blue on hover over this div, this means that there is a 1px region around the link which will turn blue without the link text turning yellow. So you either need to change the color change to hover over the link or you can remove the border from the div and add it to the link instead.

FKlusmann · January 11, 2023, 1:55am

Thanks again, @bbsmooth . I am probably wrong, it looks like the .linkbox expands to accommodate the ul > li children. I don’t see any border displayed around them.

I expanded the browser to its maximum and drug the pointer as slowly as possible. I never found a dead area.

Unrelated, but important as I am colorblind, could you suggest a better combination of background / text colors?

Thanks again.
– Fred

bbsmooth · January 11, 2023, 5:25am

Do you see how my mouse pointer is just barely over the black border so it is triggering the :hover on the .linkbox div which is turning the background blue but it is not hovering over the link itself and thus the link text is not turning yellow. It’s a very minor issue and most likely no one will notice, but if you are a perfectionist like me then you’ll want to fix it

FKlusmann · January 11, 2023, 7:55pm

Thanks again, @bbsmooth
In the updated CodePen, I removed the borders, add box-shadow: 0 0 3px black; to .linkbox and put an <hr> under the table. This looks more like what I hope for.
Is this a solution you would use, or is there something better?
Any suggestion for problem 2? Or comment on the colors?
I appreciate and obviously need the help you have given.
Thanks.
– Fred

bbsmooth · January 11, 2023, 8:02pm

Ya, I think you are probably going to have to use absolute positioning on the submenu.

FKlusmann · January 11, 2023, 8:19pm

I tried position: absolute; under each of the hovers. Yes, it comes over the top. “link-3” highlighted shows link-3-b, link 3-a is not seen.
Ill be back in a couple of hours.
Thanks, @bbsmooth

FKlusmann · January 13, 2023, 5:32pm

Hi Bruce @bbsmooth ,
My latest version is on CodePen, I used flex-wrap: wrap-reverse; so that the linkboxes stack when the screen width is reduced and allow all of the links to be seen.
I would appreciate any suggestions or comments. I went back to black and white as I am not able to get a good evaluation for the color change idea (suggested by my granddaughter).
Thank you again for your teaching and guidance.
– Fred

system · July 15, 2023, 5:33am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
CRAETE navigation list elements so that when the cursor hovers over them, the background color and text color are switched, and the cursor becomes a pointer HTML-CSS	4	1658	January 10, 2023
Puzzled by hover color change in a nav bar HTML-CSS	4	593	March 9, 2021
Why won't :hover work? HTML-CSS	8	48915	March 9, 2021
Need help in the color attribute here HTML-CSS	8	40	January 4, 2025
CSS :Hover; Why only the area of text gets ":hover"(gets black); why not the whole "padding area"? HTML-CSS	7	4224	March 8, 2023

CSS action when hovering

Related topics