Измените элемент A, наведя курсор на ElementA и ElementB

Question

Цель: у меня есть 2 x <ul>, и мне нужно вызвать 5-го ребенка во 2-м ul, наведя курс на этого ребенка или 5-го ребенка с первого <ul>

Вот что япока пробовал:

.images ul {
    list-style: none;
}

.images ul li {
    display: inline-block;
    height: 100%;
    padding: 0px 10px 0px 10px;
    width: 80px;
}

.images ul li img {
    width: 100%;
}

.skills {
    max-width: 640px;
    margin: 0 auto 200px auto;
}

.skills ul {
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0;
}

.skills ul li {
    font-family: "Nunito Sans";
    text-transform: uppercase;
    font-weight: 600;
    padding: 5px 0px;
    margin: 10px 0;
}

.skills ul li i {
    font-size: 18px;
    color: red;
    padding: 0px 8px 0px 0px;
}

.html-pct,
.css-pct,
.ps-pct,
.ae-pct,
.pr-pct {
    float: right;
}


.skills-bar {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0px 0px 0px;
    background: #222;
    box-shadow: 0 0 1px 1px rgba(0,0,0,.6);
}

.skills-html,
.skills-css,
.skills-ps,
.skills-ae,
.skills-pr {
    float: left;
    background: #1d67f2;
    height: 2px;
    box-shadow: 0 0 6px #1d67f2;
}

.skills-html {
    width: 0%;
    transition: width 1500ms cubic-bezier(.3,.76,.19,.99);
}

.skills-css {
    width: 0%;
    transition: width 1500ms cubic-bezier(.3,.76,.19,.99);
}

.skills-ps {
    width: 0%;
    transition: width 1500ms cubic-bezier(.3,.76,.19,.99);
}

.skills-ae {
    width: 0%;
    transition: width 1500ms cubic-bezier(.3,.76,.19,.99);
}

.skills-pr {
    width: 0%;
    transition: width 1500ms cubic-bezier(.3,.76,.19,.99);
}

.skills ul li:nth-child(1):hover .skills-html {
    background: #1da1f2;
    box-shadow: 0 0 6px #1da1f2;
    width: 90%;
}

.skills ul li:nth-child(2):hover .skills-css {
    background: #1da1f2;
    box-shadow: 0 0 6px #1da1f2;
    width: 75%;
}

.skills ul li:nth-child(3):hover .skills-ps {
    background: #1da1f2;
    box-shadow: 0 0 6px #1da1f2;
    width: 60%;
}

.skills ul li:nth-child(4):hover .skills-ae {
    background: #1da1f2;
    box-shadow: 0 0 6px #1da1f2;
    width: 30%;
}

.skills ul li:nth-child(5):hover .skills-pr {
    background: #1da1f2;
    box-shadow: 0 0 6px #1da1f2;
    width: 30%;
}

.images ul li:nth-child(5):hover .skills-pr {
    background: #1da1f2;
    box-shadow: 0 0 6px #1da1f2;
    width: 100%;
}

.img5:hover .skills-pr {
    background: #1da1f2;
    box-shadow: 0 0 6px #1da1f2;
    width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="images">
  <ul>
    <li class="img1">1<img src="https://picsum.photos/200/300?image=1080"</li>
    <li class="img2">2<img src="https://picsum.photos/200/300?image=1080"></li>
    <li class="img3">3<img src="https://picsum.photos/200/300?image=1080"></li>
    <li class="img4">4<img src="https://picsum.photos/200/300?image=1080"></li>
    <li class="img5">5<img src="https://picsum.photos/200/300?image=1080"></li>
  </ul>
</div>

        <div class="skills">
            <ul>
                <li>
                    <span>HTML</span><span class="html-pct">90%</span>
                    <span class="skills-bar"><span class="skills-html"></span></span>
                </li>
                <li>
                    <span>CSS</span><span class="css-pct">75%</span>
                    <span class="skills-bar"><span class="skills-css"></span></span>
                </li>
                <li>
                    <span>Photoshop</span><span class="ps-pct">60%</span>
                    <span class="skills-bar"><span class="skills-ps"></span></span>
                </li>
                <li>
                    <span>After Effects</span><span class="ae-pct">30%</span>
                    <span class="skills-bar"><span class="skills-ae"></span></span> 
                </li>
                <li>
                    <span>Premier</span><span class="pr-pct">30%</span>
                    <span class="skills-bar"><span class="skills-pr"></span></span>
                </li>
            </ul>
        </div>

Здесь у вас есть кодекс всего этого: https://codepen.io/anon/pen/moBmgq

первый работает, вызывая его путем зависания.Но две попытки запустить его на другом, который я просто не могу понять.

Не стесняйтесь задавать вопрос, если вам нужна дополнительная информация:)

Answer 1

Я думаю, что вы ищете фальшивое песо: парить, что невозможно.Я считаю, что вы должны рассмотреть возможность добавления / удаления класса CSS.

Вот что-то похожее. Наведите указатель мыши с JQuery