CSS或Javascript href悬停（或鼠标悬停），显示其他可点击的链接
[英]CSS or Javascript href hover (or mouseover) showing additional clickable links
问题描述
当用户将鼠标悬停在链接上时，我需要为他们提供各种编辑选项。 我想我已经在某处看到它完成了，但是我似乎找不到一个例子。 我在这里建立了一个准示例，但效果不佳。 另外，我的示例让我以-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>
3 个解决方案
解决方案1
2 已采纳 2011-12-02 23:58:01
我认为它应该像这样工作，只需设置两个图像元素的来源：
<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>
解决方案2
0 2011-12-02 23:53:04
您大部分都在那儿，似乎很有效。 我要做的就是在#myoptions元素之间添加所需的图标图像。
更新资料
我用您想要的创建了一个JSFiddle。 显然改变图像和东西
这里没有Java语言
解决方案3
-1 2011-12-02 23:54:11
如何在激活 CSS ":hover" 的纯 JavaScript 中模拟鼠标悬停？
[英]How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.