css3如何通过点击改变样式

Posted 2023-04-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3如何通过点击改变样式相关的知识，希望对你有一定的参考价值。

css3有很多动画但是只支持hover这种鼠标放上触发的,点击触发的有吗,active和visited都不能很好的应用

CSS3 有一个 :target 属性

这是一个简单的DEMO 高级用法可以再百度搜索：

<!DOCTYPE html>
<html>
<head>
<style>
:target
border: 2px solid #D4D4D4;
background-color: #e5eecc;

</style>
</head>
<body>

<h1>This is a heading</h1>

<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>

</body>
</html>

参考技术A 我提供一个思路，这个思路应该可以实现所有类似的问题。
使用input的type='radio'类型，radio在css3样式中有:checked这样的伪样式，
通过:checked的伪样式实现，点击切换样式，这样就不用借助js来实现
<input type="radio" value="" id="Input_Radio" hidden>
#Input_Radio:checked~inputbackground-color: #333;color:#fff; 参考技术B 你应该求助js，而不是css...方向错了！追问

js谁都知道,就是问css能不能实现

追答

我觉得我说得很明显了，自己判断

css在点击时改变元素的样式

【中文标题】css在点击时改变元素的样式【英文标题】：css change style of an element on click 【发布时间】：2011-08-31 01:30:42 【问题描述】：

我有一个元素列表，我想在单击列表元素时更改元素的样式（并且该特定样式保持不变，直到用户按下另一个列表项）。

我尝试使用 'active' 样式，但没有成功。

我的代码：

#product_types
       
    background-color: #B0B0B0;
position: relative; /*overflow: hidden;*/



#product_types a:active

    background-color:yellow;

但元素是“黄色”只有一毫秒，而我实际上点击它...

【问题讨论】：

【参考方案1】：

使用 :focus 伪类

#product_types a:focus

 background-color:yellow;

看这个例子 -> http://jsfiddle.net/7RASJ/

focus 伪类适用于表单字段、链接等元素。

【讨论】：

查看我在上面发布的示例链接。另外，你在设计什么样的元素？ @dana：您使用的是 Chrome 或 Safari，不是吗？它很完美，但在 Chrome 中根本不起作用……知道为什么吗？可能是因为它只适用于通常可以接收焦点的元素，如 INPUT 或 A。例如，它不适用于典型的 DIV。（我认为可以通过给它tabindex="-1" 来允许任何HTML 接收焦点。或者是tabindex="0"？）【参考方案2】：

它在其他浏览器中不起作用的原因与css focus规范有关。它指出：

:focus 伪类在元素具有焦点时应用（接受键盘事件或其他形式的文本输入）。

因此，在文本输入字段或使用 Tab 键聚焦时，它似乎工作得非常好。为了使上述内容与其他浏览器兼容，将 tabindex 属性添加到每个元素，这似乎可以解决问题。

HTML：

<ul>
    <li id = 'product_types'><a href='#' tabindex="1">First</a></li>
    <li id = 'product_types'><a href='#' tabindex="2">Second</a></li>
</ul>

CSS：

#product_types  
    background-color: #B0B0B0;
    position: relative;


#product_types a:focus      
    background-color:yellow;

JSFiddle Example

【讨论】：

以上是关于css3如何通过点击改变样式的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 CSS3 转换字体样式？

android 如何改变checkbox样式