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

Question

当我将鼠标悬停在列表项 (li) 时该怎么办，会有第二个链接可以点击以执行其他操作？

例子 ：

Answer 1

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

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/

Answer 2

鉴于此 HTML 代码：

<li>
  <a href="#">Personal</a> <a href="#" class="second-link">edit</a>
</li>
<li>
  <a href="#">Work</a> <a href="#" class="second-link">edit</a>
</li>
<li>
  <a href="#">Family</a> <a href="#" class="second-link">edit</a>
</li>

您可以添加以下 CSS 规则：

.second-link {
  display: none;
}

li:hover .second-link {
  display: block;
}

当指针悬停时，将显示LI相对值。a.second-link

Answer 3

这是你在看的吗

http://jsfiddle.net/cancerian73/59d9H/

CSS

#wrapper {
    margin: 0 auto;
}
#wrapper ul {
    list-style: none;
    max-width: 200px;
}
#wrapper ul li {
    display: block;
    font: bold 14px/22px Arial, Helvetica, sans-serif;
    color: #333;
    background-color: #ccc;
    border-bottom: 2px solid #fff;
    position: relative;
}
#wrapper ul li a {
    text-decoration: none;
}
#wrapper ul li a:hover {
    text-decoration: underline;
}
.edit {
    position: absolute;
    right: 2px;
    top: 2px;
}

Answer 4

我想这就是您要搜索的内容：

HTML 代码：

<ul>
<li><a href="#list-link-1"><span class="name">List 1</span></a><a href="#edit-link-1"><span class="edit">edit</span></a></li>
<li><a href="#list-link-2"><span class="name">List 2</span></a><a href="#edit-link-2"><span class="edit">edit</span></a></li>
<li><a href="#list-link-3"><span class="name">List 3</span></a><a href="#edit-link-3"><span class="edit">edit</span></a></li>
</ul>

CSS是：

ul {
    list-style:none;
}
li {
    width:286px;
    background-color:lightgray;
    margin:5px;
    height:58px;
    font-size:20px;
}
li:hover {
    background-color:#bbbbbb;
}
a {
    text-decoration:none;
    width:250px;
    color:#333333;
}
span {
    position:absolute;
}
.name {
    border:3px solid lightgray;
    padding:15px;
    z-index:1;
    width:250px;
    height:22px;
    cursor:pointer;
}
.name:hover {
    border:3px solid gray;
}
.edit {
    padding:7px 15px;
    margin:10px 0px 10px 200px;
    z-index:5;
    cursor:pointer;
}
.edit:hover {
background-color:gray;
border-radius:15px;
}

小提琴：http: //jsfiddle.net/8qyr4/