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

Question

白线是<ul> ，盒子是 li 里面的 div，圆圈是使用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>

我想要做的是：当我 hover 在任何 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>