Question

我有两个div在彼此里面。外部的一个更大当我点击外部时它会改变我使用的.outer：在css中活动。当我点击内部时它也会改变（我使用.outer .inner：active），但外部div也会改变。

这是jsfiddle：https://jsfiddle.net/hetjwnxa/2/

HTML：

main()

这里是CSS：

-Wall

如何在点击内部div后不改变外部div？

任何帮助将不胜感激。谢谢！

Answer 1

当元素为:active时，由于显而易见的原因，它的所有祖先元素也将:active。

在您的情况下，如果您有权访问HTML，则可以在.testimonials-bg内添加一个额外的元素（例如.testimonials-square）作为.translation-button的兄弟将它设置为样式，使其伸展以适合.testimonials-square并为其添加:active样式。

HTML

<div class="testimonials-content">
  <div class="testimonials-bg"></div>
  <div class="testimonials-square">
    <a href="">
      <div class="translation-button">
        <p>Translate</p>
      </div>
    </a>
    <a href="">
      <div class="testimonials-square-text">
        <p>TITLE</p>
      </div>
    </a>
</div>

CSS

.testimonials-bg {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.testimonials-bg:active {
  background-color: #282165;
}

Answer 2

另一种实现方法是：内部div的onmousedown事件，将外部div属性的样式设置回正常。内部div的onmouseup事件，设置内部div的样式=“”;否则外部div活动样式将不起作用。

当内部div为：在css中激活时，如何使外部div不作出反应

2 个答案: