Question

我想当我单击dot-1时，dot-2的高度和宽度变为24px，但是当我再次单击dot 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使下一个兄弟姐妹（如果存在）变大并变成红色，您可以对其进行动画处理。

如何在专注于另一堂课的同时改变一堂课

1 个答案: