Home/ Questions/Q 6889533
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T06:10:07+00:00

I have a need to present a user with various editing options when they

  • 0

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

enter image description here

Here is a snapshot of how I would like it to function.

enter image description here

The mouseover (or something similar) would result in:

  1. the bulleted item would change to a different image icon

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

  3. the links would be of various lengths so I am trying not to use absolute positioning.

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.

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

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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