隐藏链接直到悬停 div答案

【问题标题】：hide link until the hover div隐藏链接直到悬停 div
【发布时间】：2021-05-08 10:37:14
【问题描述】：

如何隐藏链接[添加|编辑]，当我将手柄悬停时，链接将出现在旁边，如图所示。当没有悬停时，它应该只显示 001-001 Item 6 例如。

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

Outcome

【问题讨论】：

标签： html css asp.net

【解决方案1】：

希望你能得到解决方案检查这个工作的 sn-p

.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 .hide{ color: #000;display:inline
    }
   
    .hide{
    color: #000;display:none
    }
     
    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 <span class="hide">[<a  href="#Add.aspx">Add</a>|<a href="Edit.aspx"> Edit</a>]</span></div>
    </li>
    <li class="dd-item" data-id="7">
    <div class="dd-handle">Item 7 <span class="hide">[<a  href="#Add.aspx">Add</a>|<a  href="Edit.aspx"> Edit</a>]</span></div>
    </li>
    <li class="dd-item" data-id="8">
    <div class="dd-handle">001-000 Equipment <span class="hide">[<a  href="#Add.aspx">Add</a>|<a  href="Edit.aspx"> Edit</a>]</span> </div>
    </li>
    </ol>

【讨论】：