css点击文字(非按钮) 能自动改变颜色。

这篇具有很好参考价值的文章主要介绍了css点击文字(非按钮) 能自动改变颜色。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

实现功能说明:
如下图,点击不同的文字能够切换不同的页面,同时这个tab的文字能够相应的变色,其他未选中的状态默认为灰色。
css点击文字(非按钮) 能自动改变颜色。

方案一:
使用css的伪类。
:active,元素被点击时变色,但颜色在点击后消失
:focus, 元素被点击后变色,且颜色在点击后不消失

	.classone{
		//默认颜色color为灰色,当然你也可以在这里写其他颜色以及位置的设置。
	}
    .classone:active {
      color: rgba(61, 58, 58, 0.98);
    }
   .classone:focus {
     color:  rgba(61, 58, 58, 0.98);
    }

如果我们只是简单的加上伪类,由于div等元素无法接受键盘或其他用户事件,即不支持:focus伪类,可通过增加tabIndex属性使其支持:focus。
即在相应的html里面加上一个属性tabindex

 <i class='classone' @click="ClickOne" tabindex="1">基本信息</i>

加上一个click后就会,点击后就是调用伪类的方法。如果在vue里面click没反应,可以改成click.native。

延展:
什么是伪类?
伪类用于定义元素的特殊状态。是一种特殊的类,它表示的元素的一种状态,不是固定某一个
常见的伪类选择器。
如:

//悬停在 div 上, <div> 元素上使用 :hover 伪类的实例:
div:hover {
  background-color: blue;
}

//:first-child 伪类与指定的元素匹配:该元素是另一个元素的第一个子元素。
p i:first-child {
  color: blue; //匹配所有 <p> 元素中的首个 <i> 元素
}
p:first-child i {
  color: blue;    //匹配所有首个 <p> 元素中的所有 <i> 元素
}

//:lang 伪类允许您为不同的语言定义特殊的规则。
<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

具体css伪类详情请见此链接


方案二:
上面利用伪类的话,只是当鼠标点击文字时,会自动变色,但是当我们把鼠标移到别的地方点击,颜色又会回到默认的灰色。
那这里,我是利用id 和class配合实现的。

//在html里面写上一个id,以及:class
<i id='ClassThree':class='{ClassThree_color:isThree}' @click="Three()" tabindex="3">
上传文件</i>

//利用id写常规的设置
#ClassThree{
            margin-left: 88px;
            width: 100px
        }
//当变量isThree为真时,会渲染下面的样式
.ClassThree_color{
            color: rgba(0, 84, 254, 1);
        }

//在js里
Three(){
this.isThree=true;
}

其中isThree是自己定义的布尔值(如果是vue框架,就在data里面设置相应变量就好了),当然我们也可以写等号表达式等。

经验证,实现了预期目标。文章来源地址https://www.toymoban.com/news/detail-409901.html

到了这里,关于css点击文字(非按钮) 能自动改变颜色。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 现代 CSS 解决方案:文字颜色自动适配背景色!

    在 23 年的 CSS 新特性中,有一个非常重要的功能更新 -- 相对颜色 。 简单而言,相对颜色的功能,让我们在 CSS 中,对颜色有了更为强大的掌控能力。 其核心功能就是,让我们 能够基于一个现有颜色 A,通过一定的转换规则,快速生成我们想要的颜色 B 。 其功能能够涵盖:

    2024年02月03日
    浏览(52)
  • 改变 ElementUI 按钮的颜色

    使用 ElementUI 提供的类名 ElementUI 提供了一些预定义的类名,可以通过在组件上添加这些类名来改变按钮的颜色。例如,如果您想将按钮的颜色更改为红色,可以在按钮上添加 el-button--danger 类名,代码如下所示: 自定义样式 您还可以通过自定义样式来更改按钮的颜色。为此,

    2024年02月11日
    浏览(31)
  • 用css实现简单的点击按钮动态效果

    效果图: 截图效果不是很好,但是大概看的出来效果。 实现: html: css:

    2024年02月06日
    浏览(40)
  • MFC重载CButton类,实现改变按钮背景色、字体样式更改、鼠标滑动按钮变色功能

    在对话框内添加button控件,button控件属性中 所有者 描述改为TRUE 添加COwerButton类。代码如下: COwerButton.h COwerButton.cpp 给button按钮添加变量,变量类型设为COwerButton,也可在主界面XXXDlg.h中修改button类型 COwerButton m_button1; 运行完成,效果如下: 当鼠标移动到按钮上以及点击按钮

    2024年02月12日
    浏览(55)
  • 微信小程序开发——动态改变按钮背景颜色

      在wxss文件中可以简单地设置button的背景颜色和各种样式,然而,这样的样式设计不能够动态改变。那么,如何动态改变控件的样式呢?下面以button为例来介绍。 此方法不用修改wxss文件,首先,在 js文件 中定义一个初始化边变量并给他赋初始化值(比如color:\\\'white\\\'),此变

    2024年02月12日
    浏览(98)
  • uniapp,点击选中并改变颜色,第二次点击取消选中状态

    字符串的indexOf和数组的indexOf用法一致! arr.indexOf(item) 该方法返回某个元素在数组中的位置。若没检索到,则返回 -1。 2.1html 2.2js

    2024年02月05日
    浏览(39)
  • 微信小程序点击按钮变颜色

    微信小程序点击按钮变颜色 前端页面: js: CSS: 效果图:  

    2024年02月04日
    浏览(51)
  • EXCEL中点击单元格,所在行和列都改变颜色

    在日常工作中,尤其是办公室工作人群,尝尝需要处理大量的数据,在对数据进行修改时,时长发生看错行的事情,导致数据越改越乱,因此,我常用的一种方法就是选中单元格时,所在行、列标记为特殊颜色,下面就是我常用的标记方法,仅供参考,如大家还有其他方法,

    2024年02月10日
    浏览(42)
  • HTML JS实现点击按钮下载文件功能例子(C知道版)

            其实这篇应该算是一篇“水”文章,为什么要这么“水”呢,除了最近南方的气候闷热难耐需要降温之外,另一个主要原因,这里面所写的代码均是由CSDN的AI文本大模型\\\"C知道\\\"完成,我在这里只是简单记录一下,也方便其他有需求的同学借鉴一下,少绕一些弯路(有

    2024年02月15日
    浏览(38)
  • Element ui 里面 Table 通过点击操作按钮实现展开行功能

    1.直接上代码,个人随记   2.script 里的内容 3.实现效果  

    2024年02月10日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包