[已解决]鼠标放到列表上面后面显示×的效果

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

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

最佳答案

月排行榜 / 总排行榜

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>

跳转到最佳答案楼层

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

这个最佳答案由 sukiwhip 给出，感谢 sukiwhip 的回答。

单击隐藏图章

<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

我来看看

账号		自动登录	找回密码
密码			立即注册