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

Question

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

I have a ul inside of it are multiple li's and inside of every li a div.

After every li there is a circle created using :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>

What I want to do is: When I hover over any of the div's the circle border-radius changes according to its nth number, if it is odd the top right corner border-radius changes if it is even the top left border-radius changes.

I think it should should be something like this:

.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

I changed your code a little bit to move the circle from the li to the div , because CSS does not offer a way of traveling back to an ancestor from a descendant. A couple of tweaks to the positioning made it look the same(ish).

Adding the code to change the circle on :hover was therefore easy; just add :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>