Vue.js鼠標懸浮更換圖片

Vue.js鼠標懸浮更換圖片

最近自己做的項目中設計師要求分類欄中鼠標懸停更換圖片，大致實現出來的效果就是這樣：

這個在jQuery中是個很簡單的事，但是在vue中我還是第一次實現。

首先將所有的選中後圖片都覆蓋到沒選中圖片上

html代碼如下

      <ul>
          <li>
            <a href="">
              <img src="../../../img/goods/study.png" alt="學習">
              <img class="hide_tab" src="../../../img/goods/study_1.png" alt="學習">
            </a>
          </li>
          <li>
            <a href="">
              <img src="../../../img/goods/life.png" alt="生活">
              <img class="hide_tab" src="../../../img/goods/life_1.png" alt="生活">
            </a>
          </li>
          <li>
            <a href="" >
              <img src="../../../img/goods/sport.png" alt="運動">
              <img class="hide_tab" src="../../../img/goods/sport_1.png" alt="運動">
            </a>
          </li>
          <li>
            <a href="">
              <img src="../../../img/goods/clothes.png" alt="服飾">
              <img class="hide_tab" src="../../../img/goods/clothes_1.png" alt="服飾">
            </a>
          </li>
          <li>
            <a href="" >
              <img src="../../../img/goods/hat.png" alt="鞋帽">
              <imgclass="hide_tab" src="../../../img/goods/hat_1.png" alt="鞋帽">
            </a>
          </li>
          <li>
            <a href="" >
              <img src="../../../img/goods/food.png" alt="食品">
              <img class="hide_tab" src="../../../img/goods/food_1.png" alt="食品">
            </a>
          </li>
          <li>
            <a href="">
              <img src="../../../img/goods/other.png" alt="其他">
              <img class="hide_tab" src="../../../img/goods/other_1.png" alt="其他">
            </a>
          </li>
        </ul>

css代碼如下

.right {
      float: left;
      ul {
        margin-left: 1px;
        li {
          display: inline-block;
          margin-left: 12px;
          width: 100px;
          height: 100px;
          a{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            .hide_tab{
              position: absolute;
              bottom: 0;
            }
          }
        }
      }
    }

其實就是很簡單的通過position:absolute進行了佈局，現在選中樣式的圖片已經全部覆蓋到了沒有選中樣式圖片之上了。

接下來就需要一個變量控制他們的顯隱。這個變量應該是一個和每個分類一一對應的，那這個變量就不應該是一個簡單的布爾值，而是一個數字，和每個分類圖片對應。

我定義這個變量叫做active，在data中聲明

data(){
    return{
        active: 0
    }
}

再定義一個方法控制active變量的變化

showActive(index) {
    this.active = index;
}

方法中的index參數就是鼠標懸浮時傳入的值

修改html代碼如下

        <ul>
          <li>
            <a href="" @mouseenter="showActive(1)" @mouseleave="showActive(0)">
              <img src="../../../img/goods/study.png" alt="學習">
              <img v-show="active === 1" class="hide_tab" src="../../../img/goods/study_1.png" alt="學習">
            </a>
          </li>
          <li>
            <a href="" @mouseenter="showActive(2)" @mouseleave="showActive(0)">
              <img src="../../../img/goods/life.png" alt="生活">
              <img v-show="active === 2" class="hide_tab" src="../../../img/goods/life_1.png" alt="生活">
            </a>
          </li>
          <li>
            <a href="" @mouseenter="showActive(3)" @mouseleave="showActive(0)">
              <img src="../../../img/goods/sport.png" alt="運動">
              <img v-show="active === 3" class="hide_tab" src="../../../img/goods/sport_1.png" alt="運動">
            </a>
          </li>
          <li>
            <a href="" @mouseenter="showActive(4)" @mouseleave="showActive(0)">
              <img src="../../../img/goods/clothes.png" alt="服飾">
              <img v-show="active === 4" class="hide_tab" src="../../../img/goods/clothes_1.png" alt="服飾">
            </a>
          </li>
          <li>
            <a href="" @mouseenter="showActive(5)" @mouseleave="showActive(0)">
              <img src="../../../img/goods/hat.png" alt="鞋帽">
              <img v-show="active === 5" class="hide_tab" src="../../../img/goods/hat_1.png" alt="鞋帽">
            </a>
          </li>
          <li>
            <a href="" @mouseenter="showActive(6)" @mouseleave="showActive(0)">
              <img src="../../../img/goods/food.png" alt="食品">
              <img v-show="active === 6" class="hide_tab" src="../../../img/goods/food_1.png" alt="食品">
            </a>
          </li>
          <li>
            <a href="" @mouseenter="showActive(7)" @mouseleave="showActive(0)">
              <img src="../../../img/goods/other.png" alt="其他">
              <img v-show="active === 7" class="hide_tab" src="../../../img/goods/other_1.png" alt="其他">
            </a>
          </li>
        </ul>

只有在當前index和active相等時，纔會顯示已選中分類的圖片。
而鼠標離開時，傳入一個沒有與之對應的0，這樣就沒有顯示了。