Question

当用户将鼠标悬停在链接上时，我需要为其提供各种编辑选项。我想我已经看到它在某个地方完成了，但我似乎无法找到一个例子。我在这里建立了一个准示例，但它并不能正常工作。另外，我的例子让我有点作弊-45的边缘，只是为了得到一个有效的例子。

以下是我的代码如何运作的快照（下面的代码）。

enter image description here

以下是我希望它如何运作的快照。

enter image description here

鼠标悬停（或类似的东西）会导致：

项目符号项目将更改为其他图片图标
一组图标将显示为编辑，删除等，并且这些图标可在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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><div id="myoptions">&nbsp;<a href="#">A</a>&nbsp;<a href="#">M</a>&nbsp;<a href="#">E</a>&nbsp;<a href="#">D</a></div></li>
                <li><a target="_blank" href="link2.htm">Link 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><div id="myoptions">&nbsp;<a href="#">A</a>&nbsp;<a href="#">M</a>&nbsp;<a href="#">E</a>&nbsp;<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>

Answer 1

我认为它应该是这样的，只需设置两个图像元素的来源：

<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>

Answer 2

你最重要的是，它似乎有效。我要做的就是在#myoptions元素之间添加你想要的图标图像。

<强>更新

我已经创建了一个你想要的JSFiddle。显然改变图像和东西

http://jsfiddle.net/MaCqw/

这里没有Javascript，

Answer 3

我认为你需要Javascript，也许不需要。看看jQuery show：

http://api.jquery.com/show/

这是我个人的最爱，而且很容易实现。

CSS或Javascript href悬停（或鼠标悬停）显示其他可点击链接

3 个答案: