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.