【发布时间】：2020-05-18 23:22:27
【问题描述】：
我有一个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%;
}
【问题讨论】：
-
我已在您的问题中添加了Stack Snippets，但它并没有重现您正在谈论的问题，可能是由于缺少 CSS 和 HTML。请edit该问题，以便它确实重现该问题。
-
没有问题，只是我不知道如何选择下一个元素我在最后一个代码中添加了注释。抱歉，我把它回滚了，你把它弄得很混乱，这是较长代码的一小部分，我无法发布整个内容，也没有理由发布。
-
添加了 sn-ps 以帮助回答者和您...（添加后，有一个将片段复制到回答按钮，它允许回答者直接使用您的代码，并向您显示工作解决方案）。
-
我明白，但这不是我之前提到的完整代码。 sn-ps 无法正常工作。
-
很公平。请注意，我不是要求完整的代码，只是 minimal reproducible example;足以让人们可以为您提供正确的 CSS 来处理您的情况。由于无法尝试代码并查看它是否有效，我不确定您会得到很多好的答案。只是想帮助您获得最佳答案，并帮助其他有类似问题并找到您的问题的人也获得帮助。
标签： css css-selectors hover