通过悬停 ElementA 和 ElementB 更改 elementA

Question

目标：我有 2 x <ul>，我需要通过悬停第一个 <ul> 中的第 5 个孩子或第 5 个孩子来触发第 2 个 ul 中的第 5 个孩子

这是我目前尝试过的：

.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

我认为您正在寻找的是伪造 pesudo :hover 这是不可能的。我相信您应该考虑添加/删除 css 类。

这里有类似的东西。 Hover Item with JQuery