CSS或Javascript href hover（或mouseover），显示其他可点击链接 [英] CSS or Javascript href hover (or mouseover) showing additional clickable links
问题描述
当用户将鼠标悬停在链接上时，我需要向用户显示各种编辑选项。我想我已经看到它在某个地方做，但我似乎找不到一个例子。我在这里建立了一个准实例，但它不工作正常。另外，我的例子有一种作弊的边缘-45只是一个工作的例子。
I have a need to present a user with various editing options when they hover over a link. I think I have seen it done somewhere, but I can't seem to find an example. I've built a quasi-example here, but it doesn't quite work right. Also, my example has me sort of cheating with margins of -45 just to get a working example.
这是一个快照我的代码的功能（下面的代码）。
Here is a snapshot of how my code functions (code below).
>
这里是我想要的功能的快照。
Here is a snapshot of how I would like it to function.
>
鼠标悬停（或类似操作）会导致：
The mouseover (or something similar) would result in:
-
更改为其他图像图标
the bulleted item would change to a different image icon
一组图标将出现以编辑，删除等，这些图标将在白色空间中可选/可点击href链接的右侧。
a set of icons would appear to edit, delete, etc. and these would be selectable/clickable in the white space to the right of the href link.
链接将有各种长度，因此我不想使用绝对定位。
the links would be of various lengths so I am trying not to use absolute positioning.
我意识到第二个要求可能不是可能的，如果它是基于一个真正的悬停或鼠标悬停，因为一旦用户不再鼠标悬停或悬停在活动链接，图标应该消失，变得不可选择。有没有什么让整行（也许链接加上45像素旁边）保持hoverable / mouseover-able？我不想让用户点击看到选项。
I realize the second requirement might not be possible if it's based on a real hover or mouseover because once the user is no longer mousing-over or hovering-over the active link, the icons should disappear and would become unselectable. Is there someway to make the whole row (maybe the link plus 45 pixels next to it) remain hoverable/mouseover-able? I do not want the user to have to click to see the options.
这是纯粹的CSS可能吗？或者，是否有Javascript解决方案？
Is something like this possible with pure CSS? Or, is there a Javascript solution?
<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
$ b
UPDATED CODE: 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>
推荐答案
我认为它应该工作，两个图像元素的来源：
I think it should work like that, just set the sources for the two image elements:
<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>
这篇关于CSS或Javascript href hover（或mouseover），显示其他可点击链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
