vue 에서 div 에 마우스 hover 순간 - 버튼 만들기

---

forEach 문으로 돌린 div 가 있는데

div 에서 마우스가 특정 div 에 올라갔을 때

거기에만 버튼을 보이게 하는 효과.

---

 

Vue.js

 <!-- Dragg Box -->
    <draggable
      :list="list"
      v-bind="$attrs"
      class="board-column-content"
      :set-data="setData"
    >
      <div
        v-for="element in list"
        :key="element.id"
        class="board-item"
        v-on:mouseover="mouseover"
        v-show="active"
      >
        <div class="board-item-text">
          <span class="el-icon-menu span2"> {{ element.name }}</span>
        </div>
        <div class="board-item-btn2">
          <i class="item-delete" />
        </div>
      </div>
    </draggable>

 

CSS

  .board-column-content {
    height: auto;
    overflow: hidden;
    border: 10px solid transparent;
    min-height: 60px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    width: 100%;

    .board-item {
      cursor: pointer;
      width: 100%;
      height: 40px;
      margin: 5px 0;
      background-color: #fff;
      text-align: left;
      line-height: 35px;
      padding: 0px 0px 0px 10px;
      box-sizing: border-box;
      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);

      .board-item-text {
        float: left;
        width: 70%;
        height: 39px;
      } 

      .board-item-btn2 {
        float: left;
        padding-left: 20px;
        width: 15%;
        height: 39px;

        .item-delete {
          display: none;
          float: right;
          padding-top: 2px;
          padding-right: 15px;
          height: 36px;
          font-size: 1.3rem;
        }
        .item-delete:after {
          content: "X";
        }
        .item-delete:hover {
          color: #ff040c;
        }
      }
    }

    .board-item:hover .item-delete {
      color: black;
      display: block;
    } 
}

---