0

I am trying to modify the css of the previous list item on hover of the following list item. I am unsure of the correct approach to this and am looking for some guidance.

In the image below you can see that I have hidden the borders on the right and bottom but need to also hide the right border of the previous list item.

enter image description here

HTML

<ul class="services-list">
    <li><a href="#">testing</a></li>
    <li><a href="#">testing</a></li>
    <li><a href="#">testing</a></li>
    <li><a href="#">testing</a></li>
</ul>

SCSS

.services-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    li {
        flex: 1 0 20%;
        width: 20%;
        height: 300px;
        border-bottom: 1px solid #CCCCCC;
        border-right: 1px solid #CCCCCC;

        &:nth-child(n+6) {
            border-bottom: none;  
        }
        &:last-child,
        &:nth-child(5) {
            border-right: none;
        }
        &:hover {
            border: none;
        }

        a {
            display: flex;
            align-items: center;
            padding: 20px 25px;
            height: 100%;
            position: relative;

            &:after {
                content: '';
                position: absolute;
                left: 0;
                margin: auto;
                bottom: 0;
                height: 5px;
                background-color: #FF8E53;
                width: 0px;
            }
            &:hover {
                box-shadow: 0 15px 25px -5px rgba(43,44,49,0.4);
                border: none;

                &:after {
                    width: 100%;
                }
            }
        }

Thanks in advance for any help!

Nick
  • 1,471
  • 2
  • 21
  • 35
  • This is possible, I was typing an answer but it got closed too soon. What you have to do is reverse-row on the flex-direction, then work with next sibling in css. Very simple example: https://jsfiddle.net/yhtx8dwc/ – Wimanicesir Feb 17 '20 at 15:45
  • However, in the linked post, there is a same solution with same principle, only he reverses twice so you can keep the same html structure. I would advise following this. – Wimanicesir Feb 17 '20 at 15:48

0 Answers0