当我将鼠标悬停在div上时，我希望它根据所悬停的第n个孩子的数量来更改其旁边的元素

Question

The white line is a <ul>, the boxes are div's inside li's, the circles are created using li:after

我里面有一个ul是多个li，每个li里面是一个div。

每个<ul>之后都有一个使用li:after创建的圆。

li

:after

我想做的是：当我将鼠标悬停在div的任何一个上时，圆的边框半径会根据其第n个数字而变化，如果为奇数，即使它的左上边框半径也会变化，右上角的边框半径也会发生变化。

我认为应该应该是这样：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}

body {
  background: #37a08e;
  overflow-x: hidden;

}




.line > ul {
  padding-top: 50px;
}
.line ul li {
  list-style: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding: 50px 0;
  background: white;
}
.line ul li:after{
    content: '';
  position: absolute;
  left: 50%;
  width: 35px;
  height: 35px;
  background: #49c1a2;
  transform: translateX(-50%);
  border-radius: 50%;
  transition: background 0.5s ease-in-out, border-radius 0.5s ease-in-out;
  
}

.line ul li div {
  background: #49c1a2;
  position: relative;
  width: 400px;
  padding: 1rem;
  border-radius: 10px;
  position: relative;
  transition: all 0.5s ease-in-out, background-color 0.25s ease-in-out;
}
.line ul li div:hover {
  background: #49c1a396;
}

.line ul li div a {
  font-size: 1.3rem;
  text-decoration: none;
}
.line ul li:nth-child(odd) div {
  left: 40px;
}
.line ul li:nth-child(even) div {
  right: 434px;
}

Answer 1

我做了一些改动，将圆圈从

<div class="line">
      <ul>
        <li>
          <div>
            <a href="#">...........</a>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis
              aliquid quaerat quam est officia qui enim nulla quibusdam? Hic
              nemo minus nisi doloremque, ducimus inventore eum quisquam aliquam
              libero magnam.
            </p>
          </div>
        </li>
        <li>
          <div>
            <a href="#">
              Coming Soon
            </a>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Voluptatibus magni perspiciatis quaerat dolorum laudantium iste
              sit, maiores molestiae doloremque assumenda?
            </p>
          </div>
        </li>
        <li>
          <div>
            <a href="#">
              Coming Soon
            </a>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Voluptatibus magni perspiciatis quaerat dolorum laudantium iste
              sit, maiores molestiae doloremque assumenda?
            </p>
          </div>
        </li>
        <li>
          <div>
            <a href="#">
              Coming Soon
            </a>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Voluptatibus magni perspiciatis quaerat dolorum laudantium iste
              sit, maiores molestiae doloremque assumenda?
            </p>
          </div>
        </li>
        <li>
          <div>
            <a href="#">
              Coming Soon
            </a>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Voluptatibus magni perspiciatis quaerat dolorum laudantium iste
              sit, maiores molestiae doloremque assumenda?
            </p>
          </div>
        </li>
        <li>
          <div>
            <a href="#">
              Coming Soon
            </a>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Voluptatibus magni perspiciatis quaerat dolorum laudantium iste
              sit, maiores molestiae doloremque assumenda?
            </p>
          </div>
        </li>
        <li>
          <div>
            <a href="#">
              Coming Soon
            </a>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Voluptatibus magni perspiciatis quaerat dolorum laudantium iste
              sit, maiores molestiae doloremque assumenda?
            </p>
          </div>
        </li>
        <li>
          <div>
            <a href="#">
              Coming Soon
            </a>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Voluptatibus magni perspiciatis quaerat dolorum laudantium iste
              sit, maiores molestiae doloremque assumenda?
            </p>
          </div>
        </li>
      </ul>
    </div>

移到

.line ul li:nth-child(odd) div:hover /* I don't know what to write here */ {
  border-radius: 50% 0 50% 50%;
}
    .line ul li:nth-child(even) div:hover + /* I don't know what to write here */ {
  border-radius: 0 50% 50% 50%;
}

，因为CSS不能提供从后代返回祖先的方式。对定位进行了一些调整，使其看起来相同。

因此，添加代码以更改li上的圆圈非常容易；只需添加div。

:hover

:hover