html - 如何设置影子根兄弟的样式?
问题描述
这不是重复的。我已经尝试过现有的解决方案,但不适用于我的示例。
我有一个创建卡片列表的父组件。悬停时,我想将所有兄弟姐妹都向右移动。
.card:hover ~ .card {
transform: translateX(20rem);
}
但是,因为这些兄弟姐妹中的每一个都是影子根,所以似乎不会影响它。
这是我尝试过的。
import { LitElement, html, css } from "lit-element";
class PokemonCard extends LitElement {
static styles = css`
.card {
background: white;
border-radius: 1rem;
padding: 2rem;
box-shadow: 4px 4px 12px 2px rgba(0, 0, 0, 0.75);
height: 400px;
width: 200px;
transition: 0.2s;
margin-right: -10rem;
}
.card:hover {
transform: translateY(-5rem);
}
.card:hover ~ .card {
transform: translateX(20rem);
}
`;
static get properties() {
return {
item: { type: Object },
};
}
render() {
return html`
<div class="card">
<h2>${item.name}</h2>
</div>
</div>
`;
}
}
customElements.get("pokemon-card") ||
customElements.define("pokemon-card", PokemonCard);
解决方案
推荐阅读
- r - if() 中的 sparseIndexTracking 0.1.0 失败:需要 TRUE/FALSE 的缺失值
- asp.net-mvc - MVC Core 2.1:找到多个相同类型的自定义属性
- c++ - 在 imageStore() 之后为 3D 纹理生成 MipMap 级别
- django - Django 形成两个具有相同值的字段,一个是唯一的,具有默认值,另一个是隐藏字段
- mongodb - 无法启动 mongodb 服务器
- java - 当我们发送 BAD Request 状态作为输出时,Resful APi 输出正在从 JSON 更改为 XML
- php - 从 Joomla 中的静态方法设置和访问私有 var
- javascript - 将一个类导入反应
- jquery - 如何将数据从 Json 转换为 java
- php - 按降序对数组值进行排序