html - 如何在专注于另一个类(class)的同时改变一个类(class)

Question

我想当我点击 dot-1 然后 dot-2 高度和宽度得到 24px 但是当我再次点击点 2 它的高度宽度再次变成 60px

 <ul class="paralx-position">
  <li class="paralx-dots"><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div2" id="img2" tabindex="0"></img></li>
  <li class="paralx-dots"><image src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div3" id="img3" tabindex="0"></image></li>
  <li class="paralx-dots"><image src="images/Circle 1- Blue .svg" class="paralx-dot-2" class="Active" data-box="div1"  id="img1"  tabindex="0"><span class="icon-position"><image src="images/logos/noun_build_1909132.svg" class="icon"></image></span></image></li>
  <li class="paralx-dots"><image src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div4" id="img4"  tabindex="0"></image></li>
  <li class="paralx-dots"><image src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div5" id="img5" tabindex="0"></image></li>
  <li class="paralx-dots"><image src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div6" id="img6" tabindex="0"></image></li>
</ul>

.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);}
}

.paralx-dot-1:focus + .paralx-dot-2{

 height:24px;
 width:24px;           (THIS CODE IS NOT WORKING)

    } 

---

我想在关注另一个类的同时为一个类设置动画，但它不起作用

.paralx-dot-1{
height:24.75px;
width:24.75px;
cursor:pointer;
display:inline-block;
outline:none;
}

.paralx-dot-2{
height:61.18px;
width:60.26px;
cursor:pointer;
display:inline-block;
right:18px;
position:relative
}

Answer 1

是的，所以这里发生了一些事情:

• 将image 更改为img，您不必 这样做，因为它是别名但image从未使用过，仅出于遗留原因存在
• CSS 选择器 a + b 要求元素彼此相邻，但它们并不像它们各自的 li 那样。
• 您的大部分元素都是 paralx-dot-1 和一个 paralx-dot-2。如果您希望所有 paralx-dot-1 都更改 paralx-dot-2 那么它将不起作用。使用 CSS，您只能影响选择器中元素内部或之后的元素。因此，关注最后一个元素不会影响前面的元素。

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

ul {
  list-style: none;
}

li {
  background: green;
  height: 25px;
  width: 25px;
}

li:hover {
  background: yellow;
}

li:hover + li {
  background: red;
  height: 50px;
  width: 50px;
}

正如您在 this CodePen 中看到的那样，上面的 HTML 和 CSS 与您需要的略有不同，但应该为您指明正确的方向。因此，在这个示例中，li:hover + li 使下一个兄弟(如果存在)变大变红，您可以改为为其设置动画。