动态循环li，鼠标移入展示不同详情数据

最新推荐文章于 2023-05-12 10:15:16 发布
最新推荐文章于 2023-05-12 10:15:16 发布
阅读量573 收藏 1
点赞数 1
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/isgjy/article/details/123603380
版权
本文介绍如何使用Vue.js实现动态循环li列表，当鼠标移入时，显示不同的详细数据。通过示例代码展示了具体的实现方法，适用于需要动态展示列表详细信息的场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果如下
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
样式就随便写了，数据自己造的假数据，后台格式也差不多，自行修改哈
源代码：

<template>
  <div id="box">
    <ul>
      <li
        v-for="(item, index) in liData"
        :key="index"
        ref="selectedColor"
        @mouseenter="mouseOver(item, index)"
        @mouseleave="mouseLeave(item, index)"
      >
        <div v-show="boxDetail != index" class="divStyle">
          <img :src="item.img" alt="" style="width: 80px" />
          <span style="font-size
最低0.47元/天 解锁文章
js的重点4:经过不同的li，显示不同的内容
小黄呀呀呀的博客
09-25 371
经过li时显示不同的内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li {
<li>的鼠标移入移出事件和点击事件分别实现为当前li添加样式，删除其他li样式...
weixin_30797027的博客
08-14 1682
li.jsp(需要提前导入jquery.min.js 地址：http://www.cnblogs.com/zhouerba/p/7358069.html ) 鼠标移入：当前li变色，其他li恢复原来颜色 鼠标移出：先删除所有li的样式，再指定某一个li变色 点击事件：当前li变色，其他li恢复原来颜色 <%@ page language="java" contentType=...
鼠标移入显示
weixin_54664933的博客
02-07 630
如何用hover伪类制造出样式显示以及隐藏的效果。 首先我们要想了解hover伪类的属性，打开W3c手册搜索hover我们就会看到关于属性的介绍和用途。 通过手册我们可以清楚地了解到hover伪类引用处于“悬停状态”。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接。了解过后，就是运用到代码里观察效果。Hover
鼠标移上，对应下拉框显示详细信息
最新发布
m0_58893670的博客
05-12 496
首先给select下拉框增加两个方法。
鼠标移入移出显示详情CSS3配合js
weixin_47278755的博客
08-09 535
效果图 第一步：引入JQ 第二步：编写html <div class="tr"> <div class="tha">01</div> <div class="tha"><input type="checkbox" name="apk[]" /></div> <!-- 部门 --> <div class="t...
PC文本超出变为省略号，同时鼠标移入显示文本详情
m0_75013578的博客
04-07 276
【代码】PC文本超出变为省略号，同时鼠标移入显示文本详情。
Div+CSS+JQuery实现选项卡，即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。...
weixin_30399055的博客
04-25 747
1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1....
jq无缝轮播 鼠标移入停止，移出滚动.zip
01-12
【标题】"jq无缝轮播 鼠标移入停止，移出滚动.zip"涉及到的是网页设计中的一个常见功能——使用HTML和jQuery实现的无缝轮播图效果，它具有交互性，即当鼠标移入轮播图时停止自动滚动，鼠标移出时恢复滚动。...
todoList案例（vue版本）之鼠标移入效果
richest_qi的博客
05-09 985
文章目录css实现js实现相关链接 鼠标移入事项时，事项所在行背景色变为浅灰色，且显示删除按钮。 鼠标移出事项时，事项所在行背景色变为白色，且不显示删除按钮。 对此，有两种实现方式， css实现 js实现 代码变更涉及的文件有， Item.vue，即Item组件。 css实现 变动部分：li:hover{ background: #ddd; }和li:hover button{ display: block; } <template>
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
10-26
在网页设计中，有时我们需要创建一个动态效果，例如列表的自动循环滚动，以吸引用户的注意力。这个效果在新闻、活动或者图片展示等场景非常常见。本文将深入解析如何使用jQuery来实现这一功能，并且在鼠标悬停时暂停...
react鼠标移入移出样式修改
酸酸的博客
11-09 6184
解决react鼠标移入移出样式修改的问题。 效果截图： 代码实现： js代码： <div className={styles.listStyle}> <Menu onClick={this.listClick} style={{ width: '100%', height: '100%' }}
标签隐藏、鼠标移到li标签上显示下拉菜单
吴清钺的博客
06-06 8318
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;style&amp
vue点击不同的li显示或隐藏对应的详情
q122214的博客
02-18 2728
<template> <div class="hello"> <h3>试玩相关问题</h3> <div v-for="(item, index) in data" :key="index" class="oneqs"> <div class="wt" @click="showDetail(index...
div展现与收起效果（鼠标移入移出）
weixin_30273175的博客
04-11 268
效果图： 移入： 移出： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入移出展现与收起效果</title> <style type="text/css"> ...
js,li形式的选项卡，点击显示不同的div
sunling的专栏
11-18 7831
练习了一上午，一直在获取元素上出错误，最终还是弄好了     Home   -->      *{     margin:0;     padding: 0;   }   #box{     width: 410px;     display: block;   }   ul{     list-style: none;     float:
新闻列表鼠标经过li动画划动效果
sutiantian88的博客
05-06 462
新闻列表鼠标经过li划动效果 .pro-titbox .bd ul{ padding:20px 0; zoom:1; } .pro-titbox .bd li{ line-height:27px; padding-left:15px; background:url(../images/icon2.png) no-repeat left 12px;position:relative;paddin...
鼠标移入输入框，li列表出现
weixin_43700362的博客
11-16 850
运行结果： 刚打开页面的时候： 鼠标移入的时候： 鼠标选中某一选项的时候，被选中项变黄色（当鼠标划过其他选项的时候，其他选项还是蓝色。），且输入框显示被选中项。 大致思路： 最上面是一个输入框， 下面是ul列表（隐藏） ，当鼠标进去输入框的时候，ul列表显示。 当鼠标划过每一个li的时候，li背景色蓝色，鼠标变手型。 当点击页面任意地方的时候，ul列表再次隐藏。 代码如下： <!DO...
ul li 鼠标移入移出变化，点击变化
daxi玫瑰的博客
09-07 967
ul li 鼠标移入移出变化，点击变化
鼠标移入效果制作
weixin_57762662的博客
10-28 890
打开DW，按下CTPL+N键新建一个HTML文档。 我们先在body标签打上ul标签，再在ul标签打上li标签和a标签，a标签里写一些内容。 在title标签下打一个style标签，然后在style标签里设置背景宽高，字体大小，背景颜色颜色，外右边距和居中。 下图是以上代码效果 接下来我们把li标签里的a标签给去了。 最后我们为li设置一个鼠标移入的样式，我们用（:hover）来设置鼠标移入的样式，我们可以设置自己喜欢的颜色和样式；这里我将li标签的移入效果写为了背
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值