今天脑子短路了，这个css怎么写？

Question

能实现这个效果就行，但是我的结构不能变。
当我鼠标移动到第一个上的时候可以的应为我用的是vue里面的鼠标事件，但是如果是循环的话，事件是循环不上的，怎么解决，看我的目录结构

<div class="conright" @mouseenter="dis" @mouseleave="diss">//这里我是给的鼠标事件
      <a class="replyioc" v-show="!rep"><p>8</p>个回答</a>//这是默认显示的，rep   这个是我在data里定义了一个数据给它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;
      },
}

Answer 1

你这个问题，估计别人懒得回答。你只有一个状态，当然不能对循环反应了。

Answer 2

给你个思路

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