Is there a way to hide the [Add|Edit] link and only show it when hovering over the handle? The desired outcome is to display "001-001 Item 6" by default, as illustrated in the image.
.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
.dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #334151; text-decoration: none; font-weight: bold; border: 1px solid rgba(255,255,255, 0.3);
background-color: #F1F2F9;
box-sizing: border-box; -moz-box-sizing: border-box;
}
.dd-handle:hover { color: #000; }
a {
color: #8760fb;
text-decoration: none;
background-color: transparent;
}
a:hover {
color: #7c59e6;
} <ol class="dd-list">
<li class="dd-item" data-id="6">
<div class="dd-handle">Item 6 [<a href="#Add.aspx">Add</a>|<a href="Edit.aspx"> Edit</a>]</div>
</li>
<li class="dd-item" data-id="7">
<div class="dd-handle">Item 7 [<a href="#Add.aspx">Add</a>|<a href="Edit.aspx"> Edit</a>]</div>
</li>
<li class="dd-item" data-id="8">
<div class="dd-handle">001-000 Equipment [<a href="#Add.aspx">Add</a>|<a href="Edit.aspx"> Edit</a>] </div>
</li>
</ol>