css - 带焦点的菜单添加文本

Question

我想制作一个非常小的菜单，所以我有每个名字的首字母，我添加了“focus”，但我希望它显示完整的单词。例如:

    css:

    .menu:focus {

     }

    php:

    <nav>
    <li class="menu"><a href="home.php>h</a></li><br>
    <li class="menu"><a href="galery.php>g</a></li>
    </nav>

and so you simply see the menu like:

h

g

如果你点击 h for ex。你会看到:

home

g

我该怎么做？

然后如果再次点击转到链接页面。

这可能吗？

编辑

    php:

    <nav>
    <li>
        <span class="m">
            H
        </span>
        <span class="f">
            <a class="menu" href="home.php">
            Home
            </a>
        </span>
    </li>
    </span>

    css:

    nav li .f {
        display: none;
    }

    nav li:hover .f {
        display: inline;
        background-color: #202020;
    }

直到这里，好的，你路过它显示完整的单词和链接，但目标不仅仅是路过，它点击它我只是将悬停更改为焦点并且它停止工作。

悬停“.m”也没有显示它不起作用。它应该切换不是可能的吗？

    css:

    nav li:focus .f {
        display: inline;
        background-color: #202020;
    }

    nav li: hover .m {
        display: none;
    }

谢谢

Answer 1

我已经为你创建了 fiddle ，你想要这样的东西吗？

<nav>
<li class="menu">
    <a href="home.php">
        <span class="test">h</span><span class="test2">ome</span>
    </a>
</li>
<li class="menu">
    <a href="home.php">
        <span class="test">g</span><span class="test2">alery</span>
    </a>
</li>

nav li a .test2{display:none} 
nav li a:focus .test2, nav li a:hover .test2{display:inline}

或者，如果您想要 javascript 解决方案，这里有适合您的代码

html

<nav class="nav">
<li class="menu">
    <a href="javascript:;" data-url="home.php">
        <span class="test">h</span><span class="test2">ome</span>
    </a>
</li>
<li class="menu">
    <a href="javascript:;" data-url="gallary.php">
        <span class="test">g</span><span class="test2">alery</span>
    </a>
</li>

CSS

nav li.menu a .test2{display:none;}
nav li.menu a .test2.open{display:inline;}

查询

$(".nav>li>a").click(function(e) {
    var trig = false;
    var links = $(this).data("url");
    $(this).children(".test2").addClass("open");
    if(trig == false){
        $(this).click(function(e) {
            window.location.href = links;
        });

    }

});

http://jsfiddle.net/ismailfarooq/p667L2y0/