时间戳

首页 > 解决方案 > CSS悬停不覆盖REACT状态内联道具

javascript - CSS悬停不覆盖REACT状态内联道具

问题描述

我有相互堆叠 15 像素的图像。由于它们来自一个数组，我使用带有反应状态的内联 css 来为它们提供 z-index 级别。我不确定它是否需要，但我相信这是一种很好的做法。

这是 React/HTML 图像元素

 {val.pairs.map((a,x) => <img key={a} attr={x} style={{zIndex: val.pairs.length - i}} alt{val}/> )}

现在，如果我使用一些 CSS 将其置于下一个之上；

 img:hover{
  z-index: 99;
  border:1px solid #ffffff;
}

边框被应用，但不是 z-index。

我认为这是因为它与国家挂钩。现在，当我忘记列表中的关键属性时，React 会一直困扰我。如何使用该键更新该元素的 z-index？

标签： javascripthtmlcssreactjs

解决方案

原因不是反应或状态，这基本上来自 css 以及它如何计算 css 规则的特异性。内联样式总是比选择器的常规 css 更强，所以唯一的方法是覆盖它 - 使用!important.

  z-index: 99 !important;

如果您对它的工作原理感兴趣，可以查看这篇文章：https ://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

这是一个简单的例子： https ://codesandbox.io/s/epic-cherry-xvg6w?file=/src/App.js

推荐阅读