是否有任何CSS属性在单击焦点图像以外的任何其他位置后保留.class:focus{-}属性

Question

我在图像上有一个动画，当我聚焦/单击图像时会触发该动画，但是单击其他任何地方时图像会失去其焦点属性/动画。

.paralx-dot-1:focus {
  animation-name:bright-dot;
  animation-duration:1.5s;
  height: 24.75px;
  width: 24.75px;
  outline: none;
  -webkit-animation-fill-mode: forwards; 
}
@keyframes bright-dot {
  from { transform:scale(1,1); }
  to { transform:scale(2,2); }
}

这个动画(https://ibb.co/wMmPCWW(发生在我点击图像的时候。当我单击图像/点动画重置后单击其他任何地方时(https://ibb.co/RjWbGzx(

有什么方法可以防止这种情况发生吗？我希望如果我单击其他任何地方，焦点保持焦点/动画。

不知道该怎么办！欢迎任何帮助。
谢谢

我试过这种方法

$('.paralx-dot-1').on('click', function () {
  $(this).transition({ scale: 1.5 });
});

它正在工作，但它正在对所有单击的图像而不是唯一单击的图像应用过渡

https://ibb.co/98TY7Jd

Answer 1

也许你应该使用一个类来指示它现在已被选中。

$(function(){
  $(".paralx-dot-1").mouseenter(function(){
    $(".paralx-dot-1").removeClass('isSelected');
    $(this).addClass('isSelected');
  });
});

.paralx-dot-1 {
  display:block;
  background-color:blue;
  width:30px;
  height:30px;
  margin-bottom:60px;
  transform:scale(1,1);
  transition-duration: 1.5s;
  transition-property: transform;
}
.paralx-dot-1.isSelected {
  transition-duration: 1.5s;
  transform:scale(2,2);
  height: 24.75px;
  width: 24.75px;
  outline: none;
  -webkit-animation-fill-mode: forwards; 
  color:#F00;
}
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="paralx-dot-1"></div>
<div class="paralx-dot-1"></div>
<div class="paralx-dot-1"></div>