tgby 发表于 2020-1-31 17:05:05

鼠标放到列表上面后面显示×的效果

请问怎么实现鼠标放在列表上面，列表那一行的最后就显示一个×的效果呢？{:7_123:}

sukiwhip 发表于 2020-1-31 21:51:43

<body>
    <ol>
      <li class="li">aaa</li>
      <li class="li">bbb</li>
      <li class="li">ccc</li>
    </ol>
</body>

<style>
    .li:hover::after {
      content: "x";
      display: inline-block;
    }
</style>

tgby 发表于 2020-2-1 17:30:55

sukiwhip 发表于 2020-1-31 21:51


后面的×，我想给它加上vue的@keyup事件，怎么加呢，百度了好多人说不行

sukiwhip 发表于 2020-2-2 23:12:02

tgby 发表于 2020-2-1 17:30
后面的×，我想给它加上vue的@keyup事件，怎么加呢，百度了好多人说不行

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <title></title>
</head>

<body>
    <div id="root">
      <ul>
            <li v-for="(v,i) in li" @mouseover="changeIndex(i)" @mouseleave="index=3">
                <span v-text="v"></span>
                <span v-if="i === index" @click="todo">x</span>
            </li>
      </ul>
    </div>
</body>

<script>
    new Vue({
      el: "#root",
      data() {
            return {
                li: ["aaa", "bbb", "ccc"],
                index: 3
            }
      },
      methods: {
            changeIndex(index) {
                this.index = index
            },
            todo() {
                alert("go on to do something")
            }
      },
    })
</script>

</html>

weiter 发表于 2020-2-3 16:06:13

我来看看
页: [1]
查看完整版本: 鼠标放到列表上面后面显示×的效果