Question

当对包含标题，摘要和某些其他元素的元素应用基于悬停的CSS转换时，当我将所有子元素悬停在元素内时，所有子元素将再次移动。

基本上，当我将鼠标悬停在其上方时，其父级及其子级（标题，突出显示...）将具有动画效果。 （这是预期的行为）。

但是，如果我将鼠标悬停在标题上，它将第二次将动画分别应用于标题。因此，标题将首次转换，比方说上升10像素，当我将鼠标悬停在其上方时，它将再次上升10个像素。外部div（父级）将仅移动一次。 （不需要）

就像我已经将自己的动画应用于父级和每个子级一样。

我尝试应用转换：无；到所有子元素，但这对我来说并没有帮助。

CSS：

.badge {
  flex-basis: 50%;
  transform: translateY(0);
  transition-duration: 1s;
  transition-property: transform;
  transition-timing-function: ease-out;
  transition-delay: 1s;
  backface-visibility: hidden;
}

.badge:last-child {
  flex-basis: 100%;
}

.badge :hover {
  transform: translateY(-8px);
}

.badge__badge {
  margin-bottom: 40px;
  margin-right: 40px; 
  width: 99%;
  height: 200px;
  background-color: rgb(27, 139, 45);
  border-radius: 8px;
  color: aliceblue;
  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);

}

.badge__prime {
  margin-left: 20px;
  margin-right: auto;

}

.badge__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

}

.badge__icon {
  width: 40px;
  height: auto;
  margin: 10px;

}

.badge__highlight {
  margin-right: auto;
  margin-left: 30px;
  display: flex;
  flex-direction: column;
}

JSX（反应）：

      <div className="badge">
        <div className="badge__badge"
          style={{ backgroundColor: this.props.backgroundColor }}>
          <div className="badge__content">
            {this.props.prime ? <h4 className="badge__prime">PRIME</h4>
              : <h4 className="badge__prime">Free</h4>}
            <h2 className="badge__title">{this.props.titleBadge}</h2>
            <div className="badge__highlight">
              {this.props.highlightBadge.split('\n').map((i, key) => {
                return <div key={key}>{i}</div>;
              })}
            </div>
          </div>
          <img className="badge__icon"alt="" src={this.props.iconBadge} />
        </div>
      </div>

预期结果： ：父div及其所有子级将在悬停时进行动画处理，一旦鼠标移到div之外，它们将返回其状态。

实际结果： ：父div及其所有子项在悬停时会进行一次动画处理，如果鼠标悬停在其中一个上，则子项会再次进行动画处理。

Link to a jsfiddle that shows my issue

每个孩子第二次发生CSS动画悬停的有害效果

0 个答案: