(css)鼠标移出样式不变

news/2024/9/22 22:09:53/

css_0">(css)鼠标移出样式不变


需求:列表鼠标移入切换样式,移出保持不变

在这里插入图片描述


<divv-for="(item, index) of newsList":key="index"class="news-list":class="{'active' : change === index}"tabindex="1"@mouseenter="handleMouseEnter(item)"@mouseleave="change = index" //重点@click="newClick(item,index)"
><!-- @mouseleave="handleMouseLeave(item)" --> 初次写的 移入取消样式<span class="newsTitle">{{ item.title }}</span><div class="newsDesc">{{ item.keywords }}</div></div>

js

// 新闻移入
handleMouseEnter(item, index) {this.change = indexif (item.picUrl !== null) {this.picUrl = item.picUrl} else {this.picUrl = require('@/assets/images/dashboard/noData.png')}
},
// 新闻点击
newClick(item, index) {this.change = index
}

css

css">
.active{color: #fff;background-color: #065de0;.newsDesc {color: #fff !important;}
}

解决参考:
在这里插入图片描述


http://www.ppmy.cn/news/1433190.html

相关文章

tcp服务器端与多个客户端连接

如果希望Tcp服务器端可以与多个客户端连接&#xff0c;可以这样写&#xff1a; tcpServernew QTcpServer(this);connect(tcpServer,SIGNAL(newConnection()),this,SLOT(onNewConnection())); void MainWindow::onNewConnection() {QTcpSocket *tcpSocket;//TCP通讯的Sockettcp…

kettle从入门到精通 第五十三课 ETL之kettle MQTT/RabbitMQ producer 实战

1、MQTT介绍 MQTT (Message Queuing Telemetry Transport) 是一种轻量级的消息传输协议&#xff0c;设计用于连接低带宽、高延迟或不可靠网络的设备。 MQTT 是基于发布/订阅模式&#xff08;Publish/Subscribe&#xff09;的协议&#xff0c;其中设备可以发布消息到一个主题&…

C++:运算符重载和“const”成员

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习《C&#xff1a;运算符重载》&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 文章目录 赋值运算符重载1. 运算符重载2.赋值运算符重载第一个点第二个点&…

分类预测 | Matlab实现RIME-BP霜冰优化BP神经网络多特征分类预测

分类预测 | Matlab实现RIME-BP霜冰优化BP神经网络多特征分类预测 目录 分类预测 | Matlab实现RIME-BP霜冰优化BP神经网络多特征分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.RIME-BP霜冰优化BP神经网络多特征分类预测&#xff08;Matlab实现完整源码和数据&a…

python模式设计之责任链模式

责任链模式是一种行为设计模式&#xff0c;它允许对象在链中依次处理请求&#xff0c;直到有一个对象能够处理它为止。 在责任链模式中&#xff0c;一系列对象按照其顺序组成一个链。当请求进入该链时&#xff0c;每个对象都会依次尝试处理请求。如果某个对象可以处理请求&…

309. 买卖股票的最佳时机含冷冻期

309. 买卖股票的最佳时机含冷冻期 题目链接&#xff1a;309. 买卖股票的最佳时机含冷冻期 代码如下&#xff1a; /* 转移方程&#xff1a;dp[i][0] max(dp[i - 1][0], max(dp[i - 1][3], dp[i - 1][1]) - prices[i]);dp[i][1] max(dp[i - 1][1], dp[i - 1][3]);dp[i][2] d…

【机器学习入门:理解Scikit-learn与Python的关系】

文章目录 前言Python与机器学习Scikit-learn简介Scikit-learn与Python的关系使用Scikit-learn进行机器学习结语 前言 在当今的数据科学和人工智能领域&#xff0c;机器学习已经成为了一个不可或缺的组成部分。而对于那些刚刚踏入这一领域的新手来说&#xff0c;理解机器学习的基…

Git和Github绑定

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…