鍍金池/ 問答/HTML5  HTML/ 今天腦子短路了，這個css怎么寫？

今天腦子短路了，這個css怎么寫？

能實現(xiàn)這個效果就行，但是我的結構不能變。
當我鼠標移動到第一個上的時候可以的應為我用的是vue里面的鼠標事件，但是如果是循環(huán)的話，事件是循環(huán)不上的，怎么解決，看我的目錄結構
很簡單效果

<div class="conright" @mouseenter="dis" @mouseleave="diss">//這里我是給的鼠標事件
      <a class="replyioc" v-show="!rep"><p>8</p>個回答</a>//這是默認顯示的，rep   這個是我在data里定義了一個數(shù)據(jù)給它fasle
      <a class="replyioc rep" v-show="rep"><p>我來回答</p></a>//這個是鼠標放上去才顯示的
         <div class="" style="width: 100%;height: 100%;padding-top: 10%">
             <i class="el-icon-star-off">{{like}}</i>// 這是圖標
         </div>
</div>

// js
data(){
    return{
        rep:false,
    }
},
methods:{
      dis:function () {
        this.tableData[0].rep=true;
      },
      diss:function () {
        this.tableData[0].rep=false;
      },
}
回答
編輯回答
初念

你這個問題，估計別人懶得回答。你只有一個狀態(tài)，當然不能對循環(huán)反應了。

2017年2月15日 05:30
編輯回答
拽很帥

給你個思路

<style>
    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

    .replyioc {
        display: block;
        position: relative;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background-color: gray;
        text-align: center;
        line-height: 24px;
    }

    .replyioc:after {
        content: "我 來 回 答";
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background-color: aqua;
        padding-top: 5px;
    }

    .replyioc:hover:after {
        display: block;
    }
</style>
<a class="replyioc">
    <div>8</div>
    <div>個回答</div>
</a>
2017年5月3日 11:54