目标:我有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

第一个起作用,通过将其自身悬停来触发它。但是我两次都无法触发它。

如果您需要更多信息,请随时提问:)

最佳答案

我认为您正在寻找的是伪造伪造的:hover,这是不可能的。我相信您应该考虑添加/删除css类。
这是类似的东西。
Hover Item with JQuery

10-05 20:53
查看更多