Show options for edition on hover css

Show options for edition on hover css

by heriberto perez

HTML

<div class="ss-formwidget-container">
  <div class="ss-formwidget-topright-actions ss-widget-nodrag">
    <div >
      <a href='#edit'>Edit</a>
    </div>
    <div >
      <a href='#duplicate'>Duplicar</a>
    </div>
    <div >
    <div>
      <a href='#delete'>Delete</a>
    </div>
  </div>
  </div>
  <div class="ss-form-entry">
    <span>Select one of the options</span>
    <span></span>
    <ul>
      <li>
        <label>
          <input type="radio">
          <span>Opción 1</span>
        </label>
      </li>
    </ul>
  </div>
</div>
    
<div class="ss-formwidget-container">
  <div class="ss-formwidget-topright-actions ss-widget-nodrag">
    <div >
      <a href='#edit'>Edit</a>
    </div>
    <div >
      <a href='#duplicate'>Duplicar</a>
    </div>
    <div >
    <div>
      <a href='#delete'>Delete</a>
    </div>
  </div>
  </div>
  <div class="ss-form-entry">
    <span>Select one of the options</span>
    <span></span>
    <ul>
      <li>
        <label>
          <input type="radio">
          <span>Opción 1</span>
        </label>
      </li>
    </ul>
  </div>
</div>

CSS

.ss-formwidget-container:hover {
    background-color: #f5f5f5;
    cursor: move;
    transition: background-color linear .15s;
}

.ss-formwidget-container:hover .ss-formwidget-topright-actions {
  display: block;
}

.ss-widget-nodrag {
  cursor: default;
}
.ss-formwidget-topright-actions {
    display: none;
    font-size: 12px;
    position: absolute;
    right: 23px;
    top: .5em;
    z-index: 4;
}

.ss-formwidget-container:hover .ss-form-entry {
    background-color: #f5f5f5;
    cursor: move;
    transition: background-color linear .15s;
}

.ss-formwidget-container .ss-form-entry {
    background-color: #fff;
    padding: 1.5em 2em;
    position: relative;
    margin: 0;
    zoom: 1;
}