使用css/less使用类修改其他元素

htzpubme 于 2023-03-20 发布在其他

关注(0)|答案(2)|浏览(144)

所以，试图得到一些帮助，如果/如何做到这一点。我有一个画布元素的水平在一个页面上的列表。我想有这样的行为，如果我点击其中之一，其他人应该得到一个100 px的宽度。我在每个画布上的点击事件的控制，只有，所以我可以在画布上添加一个“selected”类作为焦点。如果没有画布有selected类，它们应该使用它们的“default”值，但是当添加selected时，它对画布本身不做任何操作，但会查找所有其他不具有所选类的画布并更改它们的宽度。

css

来源：https://stackoverflow.com/questions/75764752/modify-other-elements-using-class-using-css-less

2条答案

按热度按时间

vecaoik11#

因此，我的解决方案是使用CSS伪类:focus。
要使它能够这样做，需要首先为canvas元素设置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>

赞(0）回复(0）举报 2023-03-20

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>

赞(0）回复(0）举报 2023-03-20

我来回答

使用css/less使用类修改其他元素

2条答案

相关问题

热门标签

最新问答