我需要在用户将鼠标悬停在链接上时向他们展示各种编辑选项。我想我已经在某处看到它完成了，但我似乎找不到一个例子。我在这里建立了一个准示例，但它并不能正常工作。此外，我的示例让我有点作弊 -45 的边距只是为了获得一个有效的示例。
这是我的代码如何运行的快照(下面的代码)。
这是我希望它如何运作的快照。
鼠标悬停(或类似的东西)会导致:
带元素符号的元素将更改为不同的图像图标
将出现一组图标，用于编辑、删除等操作，并且可以在 href 链接右侧的空白处选择/单击这些图标。
链接的长度各不相同，因此我尽量不使用绝对定位。
我意识到如果第二个要求是基于真正的悬停或鼠标悬停，则可能无法实现，因为一旦用户不再将鼠标悬停在事件链接上或悬停在事件链接上，图标就会消失并且变得不可选择。有没有办法让整行(可能是链接加上它旁边的 45 像素)保持悬停/鼠标悬停？我不希望用户必须单击才能查看选项。
纯 CSS 可以做到这样吗？或者，是否有 Javascript 解决方案？
<head>
<style>
<!--
#NewsGroup1 {width:600px;}
a { text-decoration: none; } /* color: #006ab7; */
a:hover { text-decoration: none; }
#myoptions {
display: none; margin-left:-45px;
}
a:hover + #myoptions {
display: inline;
}
-->
</style>
</head>
<body>
<div id="NewsGroup1">
<ul>
<li>News</li>
<ul>
<li><a target="_blank" href="link1.htm">Link 1 </a><div id="myoptions"> <a href="#">A</a> <a href="#">M</a> <a href="#">E</a> <a href="#">D</a></div></li>
<li><a target="_blank" href="link2.htm">Link 2 </a><div id="myoptions"> <a href="#">A</a> <a href="#">M</a> <a href="#">E</a> <a href="#">D</a></div></li>
</ul>
</ul></div>
</body>
更新代码:12/12/2011
<html>
<style>
#box1 {width:100px; background-color:yellow;}
li a img {display:none; margin-right:3px;}
li:hover img {display:inline-block;}
a {margin-right:20px;}
a.extras {margin-right:3px;}
</style>
<body>
<div id="box1">
<ul>
<li><a href="#">Link1</a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /></a></li>
<li><a href="#">Link1</a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /></a></li>
<li><a href="#">Link1</a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /></a></li>
</ul>
</div>
</body>
</html>
最佳答案
我认为它应该这样工作，只需设置两个图像元素的源:
<html>
<body>
<style>
li > img{
display:none;
}
li:hover img {
display:inline-block;
}
a{
margin-right:20px;
}
</style>
<ul>
<li><a>Link1</a><img/><img/></li>
<li><a>Link2</a><img/><img/></li>
</ul>
</body>
</html>
关于javascript - CSS 或 Javascript href 悬停(或鼠标悬停)显示额外的可点击链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8364110/