修改

Question

我想要一个非常小的菜单，所以我有每个名字的首字母，我添加“焦点”，但我希望它出现完整的单词。例如：

    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>

因此您只需看到如下菜单：


ħ

克


如果你点击h表示前。你会看到：


家

克

我该怎么做？

然后再次点击进入链接页面。

有可能吗？

修改

    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

我为你创造了小提琴，你想要这样的东西。

<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;}

Jquery的

$(".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/

菜单与焦点添加文本

修改

1 个答案: