通过悬停 ElementA 和 ElementB 更改 elementA

Posted 2023-05-08

【中文标题】通过悬停 ElementA 和 ElementB 更改 elementA

【英文标题】：Change elementA by hovering ElementA and ElementB

【发布时间】：2019-08-02 09:29:23

【问题描述】：

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

第一个有效，通过悬停来触发它。但是两次尝试在另一次上触发它，我就是想不通。

如果您需要更多信息，请随时提问：)

【问题讨论】：

你have 2 x是什么意思？

我有 2 个单独的 ul，当我悬停第一个（图像）的第 5 个孩子时，我需要它来触发对第二个 ul（技能）的第 5 个孩子的影响

您只想使用 CSS 吗？为什么不用 JS 或者 jQuery 呢？

@Kazie 我认为这在 CSS 中是不可能的，因为您必须参考 悬停元素 的 父元素 才能做到这一点工作...去JS解决方案...

说实话，我不知道如何在 JS 或 Jquery 中做到这一点，我就是你所说的 l 完全绿色 :D 但感谢您让我知道这是不可能的。现在我不必浪费时间尝试在 CSS 中执行此操作：D

【参考方案1】：

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

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