所以,试图得到一些帮助,如果/如何做到这一点。我有一个画布元素的水平在一个页面上的列表。我想有这样的行为,如果我点击其中之一,其他人应该得到一个100 px的宽度。我在每个画布上的点击事件的控制,只有,所以我可以在画布上添加一个“selected”类作为焦点。如果没有画布有selected类,它们应该使用它们的“default”值,但是当添加selected时,它对画布本身不做任何操作,但会查找所有其他不具有所选类的画布并更改它们的宽度。
vecaoik11#
因此,我的解决方案是使用CSS伪类:focus。要使它能够这样做,需要首先为canvas元素设置tabindex。下面是我的例子:
:focus
tabindex
* { box-sizing: border-box; } .canvas-container { display: flex; flex-direction: row; } .canvas-div { border: 1px solid black; height: 100px; min-width: 100px; } .canvas-div:focus { width: 100%; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="canvas-container"> <canvas class="canvas-div" height="100" tabindex="0" style="background: pink;" > </canvas> <canvas class="canvas-div" height="100" tabindex="0" style="background: yellowgreen;" > </canvas> <canvas class="canvas-div" height="100" tabindex="0" style="background: orangered;" > </canvas> </div> <script src="script.js"></script> </body> </html>
4nkexdtk2#
如果画布有一个公共父对象,您可以使用CSS:has(目前主要浏览器都支持,Firefox除外,用户必须设置一个标志才能启用)和CSS:not来实现。
canvas { border: 1px solid black; } .container:has(>.selected) canvas:not(.selected) { width: 100px; }
<div class="container"> <canvas width="200" height="300"></canvas><canvas width="200" height="300" class="selected"></canvas><canvas width="200" height="300"></canvas><canvas width="200" height="300"></canvas> </div>
2条答案
按热度按时间vecaoik11#
因此,我的解决方案是使用CSS伪类
:focus
。要使它能够这样做,需要首先为canvas元素设置
tabindex
。下面是我的例子:
4nkexdtk2#
如果画布有一个公共父对象,您可以使用CSS:has(目前主要浏览器都支持,Firefox除外,用户必须设置一个标志才能启用)和CSS:not来实现。