class h5 点击后样式变化_css实现选中后变色并且效果不消失

我在vue项目里面。想实现以下效果：

css实现选中后变色并且效果不消失。

我用了伪类。点击之后。确实会变色。

但是只是在鼠标点下去那一瞬间会变色。

当鼠标点完之后。效果就消失了。

我的代码：

{{ item.topicClassName }}

css：

li {

width: 68px;

height: 30px;

float: left;

margin-top: 30px;

margin-right: 40px;

display: inline-block;

background: #F6F6F6;

opacity: 1;

border-radius: 4px;

a {

display: block;

text-align: center;

line-height: 30px;

cursor: pointer;

span {

font-size: 14px;

color: #666666;

}

//li:first-child {

// background-color: #FFBF00;

//}

li:active{

background-color: #FFBF00;

span {

color: #FFFFFF;

}

请问怎么让它选中之后。颜色暂时不变啊？

如图：

回答

仅供参考：

1.先在data里面加个属性 selectedIndex: 0

2.css改动

li.active {

background-color: #FFBF00;

span {

color: #FFFFFF;

}

3.dom改动

{{ item.topicClassName }}

4.方法改动

getTopic(index, id) {

this.selectedIndex = index;

}

class h5 点击后样式变化_css实现选中后变色并且效果不消失相关推荐

html 点击选择变色,css实现选中后变色并且效果不消失
我在vue项目里面.想实现以下效果: css实现选中后变色并且效果不消失. 我用了伪类.点击之后.确实会变色. 但是只是在鼠标点下去那一瞬间会变色. 当鼠标点完之后.效果就消失了. 我的代码: {{ ...
class h5 点击后样式变化_H5学习笔记
目录什么是HTML: 头部标签 H5视频 H5音频 H5拖放 H5Web存储 H5应用缓存 H5画布SVG H5画布canvas 全局属性: 事件属性: 颜色.样式和阴影线条样式矩形路径转换 ...
class h5 点击后样式变化_【php】JQuery怎么实现页面刷新后保留鼠标点击addclass的样式？...
刚开始是这个效果鼠标点击之后变成了这个效果要保证实现 a 标签点击链接一个新的网址同时也要保证效果达到我目前写的网站代码可以下载 http://115.com/file/c2zlhblv 看 ...
html选中后当前变色,JS代码实现表格选中后变色操作有哪些代码？
[实例代码]html xmlns=http://www.w3.org/1999/xhtml head title无标题页-学无忧(www.xue51.com)/titlescript language ...
H5在原生手机上显示选中文字效果
H5在原生手机上显示选中文字效果 .comment {user-select: text;-webkit-user-select: text;-moz-user-select: text;-ms-us ...
取消input、textarea选中后的默认边框样式
禁用输入框.文本框轮廓线:outline属性某些浏览器下,输入框即使被设置了圆角,边框的矩形轮廓仍然可见. 例如,谷歌浏览器,严重影响页面显示效果. 截图如下: 此时,我们就要禁用input.tex ...
[H5]HTML5样式、链接和表格
[H5]HTML5样式.链接和表格 <!-- 一.HTML样式 1.标签<style> :样式定义通过style来定义一些样式<link> :资源引用通过link来引 ...
elementui 样式渲染的慢_解决vue+elementui项目打包后样式变化问题
博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序 ...
MagicIndicator选中后字体样式
MagicIndicator选中后字体样式

class h5 点击后样式变化_css实现选中后变色并且效果不消失

class h5 点击后样式变化_css实现选中后变色并且效果不消失相关推荐

最新文章

热门文章