CSS :hover behaviour

Question

Consider the following HTML code snippet:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <nav>
            <a href="" id="menu-icon"></a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </body>
</html>

and the respective CSS code snippet (styles.css):

#menu-icon {
    width: 40px;
    height: 40px;
    background-color: blue;
}

a#menu-icon:hover {background-color: black;}

#menu-icon {display:inline-block;}

nav ul {
    display: none;
    position: absolute;
    padding: 20px;
    border: 1px solid black;
    right: 20px;
    top: 60px;
    width: 50%;
}

nav:hover ul {display: block;}

Basically, this is a simple navigation bar intended to work both for desktop and mobile. However, there is a problem when you use it in mobile: the menu disappear just after you touch the icon.

In order to solve this problem, it is necessary to change the line <a href="" id="menu-icon"></a> to <a href="#" id="menu-icon"></a>.

Issue
Is this behavior expected? Why? What is the reasoning for it?

If `` isn't supposed to be a link … why are you using ``? In particular in combination with `href`? — Quentin, Aug 15 '17 at 14:52
I take it this page is not the homepage (e.g., it's not `/` but `/foo.html`)? When you click on the link, it simply redirects you back to the homepage `/`, so if that's not the page then everything would disappear. — Nelson Yeung, Aug 15 '17 at 14:56
Why do you use a tag that is intended to be a link and that is being rendered and *behave* as a link would do in the browser? also `:hover` doesn't work on a mobile, but `:focus` will be for most of the cases equivalent. — Lucas Reppe Welander, Aug 15 '17 at 14:57
@LucasReppeWelander > _"also :hover doesn't work on a mobile"_ Ok, I agree. However keep in mind that there are several pages that were developed in a time that mobile was not an issue and now they all need to be updated with the least amount of 'energy'. I'm just trying to understand this path of least resistance. — Mark Messa, Aug 15 '17 at 15:05
@Quentin > _"why are you using ``?"_ Since there is no link to follow thru, this _anchor tag_ could be changed to a _div element_ without any problem. However, the code I've pasted is somewhat spread over the web as 'the simplest' responsive navigation bar (with the _anchor tag_). Therefore, I'm not sure why the original developer has made such choice. — Mark Messa, Aug 15 '17 at 15:18
@NelsonYeung > _"it simply redirects you back to the homepage"_ Let me see if I understand it properly: a blank `href` means that the link should redirect you to the homepage. Therefore, when you touch it, the page is reloaded. Which explain why the menu disappear. Correct? — Mark Messa, Aug 15 '17 at 15:25
@MarkMessa Yes, that's exactly it. `` is equivalent to ``. Of course it would only disappear if that's not already the homepage. — Nelson Yeung, Aug 15 '17 at 15:36
@NelsonYeung > _"Yes, that's exactly it."_ Ok, I guess this answered my initial post. — Mark Messa, Aug 15 '17 at 15:49
@MarkMessa I've added it as an answer so could please kindly accept it as an answer. — Nelson Yeung, Aug 15 '17 at 15:55
@MarkMessa Are you asking why the hover style doesn't last more than an instant on mobile? Or are you asking something else? — TylerH, Aug 15 '17 at 15:57
@TylerH Yes, I'm trying to understand why the `hover` in this code is lasting just for an instant on mobile. And, if this behavior is expected, what is the reasoning of it. However, it seems that both issues were already answered in the comments above. — Mark Messa, Aug 15 '17 at 16:23

score 1 · Accepted Answer · answered Aug 15 '17 at 15:55

Provided that your current page is not the homepage (e.g., localhost:8888/foo.html and not already localhost:8888/), upon clicking/touching <a href="" id="menu-icon"></a>, it'll redirect you back to the homepage (e.g., localhost:8888/).

When you place a # <a href="#" id="menu-icon"></a>, you'll notice that you'll not be redirected and simply add the # to the end of the URL (used for anchor links). Hence, your contents stays the same.

It's a misconception that href="" will not redirect you, but it's actually equivalent to href="/". If you don't want it to redirect, you can simply remove the href or just use another tag like <span>.

score 1 · Answer 2 · answered Aug 15 '17 at 16:06

Like others have stated leaving a href tag empty will actually still redirect the user to the root directory. This has been asked elsewhere and you can get a good reply here: Is an empty href valid?

Anytime you have an element on a page that you want to be clickable but you aren't actually going to be linking to anything, its best not to put it in an anchor tag. Instead you can do something like this:

<body>
    <nav>
        <span id="menu-icon"></span>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>

Then in your css you can make the span behave like a link by changing the cursor:

cursor: pointer;

This way your user will still know that this is an interactive element.

CSS :hover behaviour

2 Answers2