html - 列表中的链接已经是一组链接

标签 html css html-lists

<分区>


要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用,以及预期结果。另请参阅:Stack Overflow question checklist

关闭 9 年前

当我将鼠标悬停在列表项 (li) 上时,会出现第二个链接,可点击该链接以执行其他操作,该怎么做?

例子:

enter image description here

最佳答案

这是一个很粗略的例子,可能还有很多其他的方法,看看吧。

HTML:

<ul> 
    <li>
        <a href="#">personal</a>
        <a href="#" class="show">show</a>
    </li> 
    <li>
        <a href="#">personal</a>
        <a href="#" class="show">show</a>
    </li>
</ul>

CSS:

  ul {
    list-style-type: none;
}
ul li {
    background: #999;
    border: 1px solid #000;
    width: 300px;
}
ul li a {
    margin: 10px 0px;
    display: inline-block;
}
.show {
    display: none;
    float: right;
}
ul li:hover .show {
    display: inline-block
}

http://jsfiddle.net/qzJL6/

关于html - 列表中的链接已经是一组链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18078073/

上一篇:javascript - 试图让图像完全重叠,同时依次淡入

下一篇:css - 有没有工具可以检查 CSS url 文件是否存在?

相关文章:

javascript - jQuery Autocomplete 出现在 HTML 的顶部,附加到 body 标签的底部

jquery - 调整大小时,div 的宽度恢复正常

html - Firefox 不会显示图像!

css - 从一个元素到另一个元素的动画

html - 样式列表按钮

HTML 显示一些图像是倒置的,有些图像不是

javascript - 在 Javascript 中动画化 div 外观

css - 奇怪的有序列表

html - 如何指示带有链接的 LI 已被按下。

javascript - 将 jQuery 函数应用于不同的元素以设置尺寸