当我将鼠标悬停在div上时，我希望它根据所悬停的第n个孩子的数量来更改其旁边的元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当我将鼠标悬停在div上时，我希望它根据所悬停的第n个孩子的数量来更改其旁边的元素相关的知识，希望对你有一定的参考价值。
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;
我做了一些改动，将圆圈从<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以上是关于当我将鼠标悬停在div上时，我希望它根据所悬停的第n个孩子的数量来更改其旁边的元素的主要内容，如果未能解决你的问题，请参考以下文章