当我将鼠标悬停在 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。

在每个 li 之后有一个使用 :after 创建的圆圈。

* {
  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;
}

<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>

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

我觉得应该是这样的：

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

Answer 1

我稍微更改了您的代码，将圆圈从 li 移动到 div，因为 CSS 不提供从后裔。对定位进行了一些调整使其看起来相同（ish）。

因此，添加更改 :hover 上的圆圈的代码很容易；只需添加 :hover.

* {
  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 div::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(odd) div::after {
  left: -37px;
}

.line ul li:nth-child(even) div {
  right: 434px;
}

.line ul li:nth-child(even) div::after {
  left: 437px;
}

.line ul li:nth-child(odd) div:hover::after {
  border-top-right-radius: 0;
}

.line ul li:nth-child(even) div:hover::after {
  border-top-left-radius: 0;
}

<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>

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

when I hover over a div I want it to change the element next to it depending on the number of the nth child that is hovered over

css

hover

css-selectors