Databases
StackOverflow2013
Postsdbo
POCSS or Javascript href hover (or mouseover) showing additional clickable links
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS or Javascript href hover (or mouseover) showing additional clickable links
    text
    copied!<p>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.</p> <p>Here is a snapshot of how my code functions (code below).</p> <p><img src="https://i.stack.imgur.com/0m9DQ.png" alt="enter image description here"></p> <p>Here is a snapshot of how I would like it to function. </p> <p><img src="https://i.stack.imgur.com/LOTjH.png" alt="enter image description here"></p> <p>The mouseover (or something similar) would result in:</p> <ol> <li><p>the bulleted item would change to a different image icon</p></li> <li><p>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. </p></li> <li><p>the links would be of various lengths so I am trying not to use absolute positioning.</p></li> </ol> <p>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.</p> <p>Is something like this possible with pure CSS? Or, is there a Javascript solution?</p> <pre><code> &lt;head&gt; &lt;style&gt; &lt;!-- #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; } --&gt; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="NewsGroup1"&gt; &lt;ul&gt; &lt;li&gt;News&lt;/li&gt; &lt;ul&gt; &lt;li&gt;&lt;a target="_blank" href="link1.htm"&gt;Link 1&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/a&gt;&lt;div id="myoptions"&gt;&amp;nbsp;&lt;a href="#"&gt;A&lt;/a&gt;&amp;nbsp;&lt;a href="#"&gt;M&lt;/a&gt;&amp;nbsp;&lt;a href="#"&gt;E&lt;/a&gt;&amp;nbsp;&lt;a href="#"&gt;D&lt;/a&gt;&lt;/div&gt;&lt;/li&gt; &lt;li&gt;&lt;a target="_blank" href="link2.htm"&gt;Link 2&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/a&gt;&lt;div id="myoptions"&gt;&amp;nbsp;&lt;a href="#"&gt;A&lt;/a&gt;&amp;nbsp;&lt;a href="#"&gt;M&lt;/a&gt;&amp;nbsp;&lt;a href="#"&gt;E&lt;/a&gt;&amp;nbsp;&lt;a href="#"&gt;D&lt;/a&gt;&lt;/div&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/ul&gt;&lt;/div&gt; &lt;/body&gt; </code></pre> <p><strong>UPDATED CODE: 12/12/2011</strong></p> <pre><code>&lt;html&gt; &lt;style&gt; #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;} &lt;/style&gt; &lt;body&gt; &lt;div id="box1"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Link1&lt;/a&gt;&lt;a class="extras" href="#"&gt;&lt;img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /&gt;&lt;/a&gt;&lt;a class="extras" href="#"&gt;&lt;img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /&gt;&lt;/a&gt;&lt;a class="extras" href="#"&gt;&lt;img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /&gt;&lt;/a&gt;&lt;a class="extras" href="#"&gt;&lt;img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link1&lt;/a&gt;&lt;a class="extras" href="#"&gt;&lt;img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /&gt;&lt;/a&gt;&lt;a class="extras" href="#"&gt;&lt;img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /&gt;&lt;/a&gt;&lt;a class="extras" href="#"&gt;&lt;img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /&gt;&lt;/a&gt;&lt;a class="extras" href="#"&gt;&lt;img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link1&lt;/a&gt;&lt;a class="extras" href="#"&gt;&lt;img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /&gt;&lt;/a&gt;&lt;a class="extras" href="#"&gt;&lt;img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /&gt;&lt;/a&gt;&lt;a class="extras" href="#"&gt;&lt;img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /&gt;&lt;/a&gt;&lt;a class="extras" href="#"&gt;&lt;img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload