设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 鼠标放到列表上面后面显示×的效果
返回列表 发新帖
查看: 2269|回复: 4

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

[复制链接]
tgby
发表于 2020-1-31 17:05:05 | 显示全部楼层 |阅读模式

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

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

x
请问怎么实现鼠标放在列表上面，列表那一行的最后就显示一个×的效果呢？
最佳答案
月排行榜 / 总排行榜
sukiwhip
2020-1-31 21:51:43
  1. <body>
  2.     <ol>
  3.         <li class="li">aaa</li>
  4.         <li class="li">bbb</li>
  5.         <li class="li">ccc</li>
  6.     </ol>
  7. </body>

  9. <style>
  10.     .li:hover::after {
  11.         content: "x";
  12.         display: inline-block;
  13.     }
  14. </style>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

sukiwhip
发表于 2020-1-31 21:51:43 | 显示全部楼层    本楼为最佳答案   
  1. <body>
  2.     <ol>
  3.         <li class="li">aaa</li>
  4.         <li class="li">bbb</li>
  5.         <li class="li">ccc</li>
  6.     </ol>
  7. </body>

  9. <style>
  10.     .li:hover::after {
  11.         content: "x";
  12.         display: inline-block;
  13.     }
  14. </style>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

tgby
 楼主| 发表于 2020-2-1 17:30:55 | 显示全部楼层
sukiwhip 发表于 2020-1-31 21:51

后面的×，我想给它加上vue的@keyup事件，怎么加呢，百度了好多人说不行
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

sukiwhip
发表于 2020-2-2 23:12:02 | 显示全部楼层
tgby 发表于 2020-2-1 17:30
后面的×，我想给它加上vue的@keyup事件，怎么加呢，百度了好多人说不行
  1. <!DOCTYPE html>
  2. <html lang="cn">

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

  12. <body>
  13.     <div id="root">
  14.         <ul>
  15.             <li v-for="(v,i) in li" @mouseover="changeIndex(i)" @mouseleave="index=3">
  16.                 <span v-text="v"></span>
  17.                 <span v-if="i === index" @click="todo">x</span>
  18.             </li>
  19.         </ul>
  20.     </div>
  21. </body>

  23. <script>
  24.     new Vue({
  25.         el: "#root",
  26.         data() {
  27.             return {
  28.                 li: ["aaa", "bbb", "ccc"],
  29.                 index: 3
  30.             }
  31.         },
  32.         methods: {
  33.             changeIndex(index) {
  34.                 this.index = index
  35.             },
  36.             todo() {
  37.                 alert("go on to do something")
  38.             }
  39.         },
  40.     })
  41. </script>

  43. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

weiter
发表于 2020-2-3 16:06:13 | 显示全部楼层
我来看看
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-29 00:01

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表