Html 如何动态改变聚合物中的CSS？

我有一个聚合物元素，它是一个图像堆栈，需要在堆栈上悬停时展开并显示每个图像。如果不动的话，应该是这样的：

悬停时，堆栈将垂直扩展

元素的代码是（

do profile pic

是另一个放置每个图像的元素）：

...
聚合物（“do-profile-pic-stack”{
图像：[]，
...
});

现在我环顾四周，似乎有两种方法可以做到这一点。一种是使用聚合物选择器。另一种是使用用户事件方法。我没有使用任何这些方法来实现默认的角度布局（上面的评论）。要垂直扩展堆栈，我必须处理定位和布局，但我似乎想不出一个好方法来实现这一点

聚合物选择器看起来很复杂。

---

从编程角度看，似乎需要使用HtmleElement。我可以这样做，但angular js处理这一点要好得多。那么，有没有更好的方法来解决这一问题，我可能是mssing？谢谢。

如果你想改变鼠标悬停时的外观，我想你可以使用纯CSS解决方案，它有两套样式，一套是普通样式，另一套是鼠标悬停样式

stack-img-container {
  // normal style here
}

stack-img-container:hover {
  // mouse-over style
  // overrides and extends normal style
}

并将其放在样式标记中（而不是点

…

）。

用于动态更改类

.盘旋{
背景色：红色；
}
请把鼠标放在我身上。
聚合物（“my-app”{
onHover：函数（e）{
e、 srcmelement.classList.add（'hovered'）；
},
onUnhover:功能（e）{
e、 srcmelement.classList.remove（'hovered'）；
}
})

该容器的样式由模板重复循环生成，以使用数据绑定和

style

属性调整堆栈的角度。上述方法的问题在于类选择器的优先级低于样式属性。此外，每个图像都需要不同于其上方图像的布局定位。上述方法将对所有图像统一应用样式。也许使用硬编码类是解决方案？我更喜欢动态添加类的方法。您可以使用CSSs

calc（）

进行单独定位，就像在

style

属性中一样。你能为你的问题添加更多细节吗？关于鼠标悬停时应该发生什么，以及鼠标悬停在哪个位置（哪个元素）。

stack-img-container {
  // normal style here
}

stack-img-container:hover {
  // mouse-over style
  // overrides and extends normal style
}