0

Goal: I have 2 x <ul> and i need to trigger the 5th child in 2nd ul by hovering either that child or the 5th child from the first <ul>

Here is what i tried so far:

.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>

Here you have a codepen of the whole thing: https://codepen.io/anon/pen/moBmgq

the first one works, triggering it by hovering itself. But the two attempts on triggering it on the other one, that i just can't figure out.

Feel free to ask question if you need more information :)

ElusiveCoder
  • 1,593
  • 1
  • 8
  • 23
Kazie
  • 37
  • 5
  • 1
    What do you mean you `have 2 x`? – Andy Hoffman Mar 12 '19 at 00:50
  • i have 2 seperate uls and i when i hover the 5th child of the first(images) i need it to trigger the effect on the 5th child of the second ul(skills) – Kazie Mar 12 '19 at 01:03
  • You wanna use CSS only? Why don't you use JS or jQuery ? – Ibra Mar 12 '19 at 01:48
  • @Kazie I don't think this is possible in CSS as you have to refer to the *parent element* of the *hovered element* to make it work... go for JS solution... – kukkuz Mar 12 '19 at 01:51
  • To be honest, i am not sure how to do it in JS or Jquery, i am what you would call l complete green :D But thanks for letting me know it is not possible. Now i don't have to waste my time trying to do this in CSS :D – Kazie Mar 12 '19 at 06:58
  • This can be done using jquery. – ElusiveCoder Mar 12 '19 at 09:05
  • Figured it out. After like.. 6 hours haha. i'm such a noob at javascript lol. – Kazie Mar 12 '19 at 15:42

1 Answers1

0

I think what you're looking for is to fake pesudo :hover which is impossible. I believe you should consider adding/removing css class.

Here is something similiar. Hover Item with JQuery

Gugu
  • 193
  • 1
  • 8