如何迭代 HTML 数组<div>元素并为每个索引号对另一个元素设置不同的样式？

Question

I would like the content value of a div 's pseudo-element ::after to change following the index number of 6 child div elements, on hover over each of these 6 divs.

I am stuck at creating a first array of the 6 divs and another array containing the 6 infos to display with the same corresponding index number.

Array #1 would be [.hov-sq:nth-child(1), .hov-sq:..] and array #2 would be the content for the 'data-content' attribute to change at each hover ['digital nomad','digital developer','superman','etc...]

So far I managed to change the pseudo-element content using this jQuery code and CSS code.

 $('.hov-sq').hover(function() { $('.c-1').attr('data-content', 'frontend developer'); });

 .landing-hov-s { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; } .hov-sq { width: 33.3333333vw; height: 50vh; z-index: 5000; } .c-1::after { /* other styling not relevant to issue */ content: attr(data-content) ''; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="landing-hov-s"> <div class="hov-sq"></div> <div class="hov-sq"></div> <div class="hov-sq"></div> <div class="hov-sq"></div> <div class="hov-sq"></div> <div class="hov-sq"></div> </div> <div class="c-1"> <h1>Laurent<br>&nbsp;&nbsp;&nbsp;Chevrette</h1> </div>

The page is live here for a proper display: http://vmax.laurentchevrette.digital/

Answer 1

Use index() to determine the index of which element within the collection is being hovered

 const content = ['Item 1','Item 2','Item 3','Item 4','Item 5','Item 6']; const $sq = $('.hov-sq').hover(function() { const idx = $sq.index(this); $('.c-1').attr('data-content', content[idx]); }, function(){ // remove when mouse leaves if wanted $('.c-1').attr('data-content','') });

 .landing-hov-s { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; } .hov-sq { width: 33.3333333vw; height: 50vh; z-index: 5000; } .c-1::after { /* other styling not relevant to issue */ content: attr(data-content) ''; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="landing-hov-s"> <div class="hov-sq">One</div> <div class="hov-sq">Two</div> <div class="hov-sq">Three</div> <div class="hov-sq">Four</div> <div class="hov-sq">Five</div> <div class="hov-sq">Six</div> </div> <div class="c-1"> <h1>Laurent<br>&nbsp;&nbsp;&nbsp;Chevrette</h1> </div>

Answer 2

jQuery's index method

If you are using jQuery, you have access to the index() method .

Also I've added the function that will run once mouse is out of the hovered div.

That said, be wary that you cannot select pseudoelements y Javascript, so you should use attribute selectors in CSS as shown belown to style them.

 $('.hov-sq').hover(function() { $('.c-1') .attr('data-content', 'frontend developer') .attr('data-index', $(this).index()); console.log($(this).index()) }, function() { $('.c-1') .attr('data-content', '') .attr('data-index', ''); });

 .landing-hov-s { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; } .hov-sq { width: 33.3333333vw; height: 50vh; z-index: 5000; } .c-1::after { /* other styling not relevant to issue */ content: attr(data-content) ''; } .c-1[data-index="0"]::after { /* Style for index 0 */ } /* Rest of the styles */

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="landing-hov-s"> <div class="hov-sq"></div> <div class="hov-sq"></div> <div class="hov-sq"></div> <div class="hov-sq"></div> <div class="hov-sq"></div> <div class="hov-sq"></div> </div> <div class="c-1"> <h1>Laurent<br>&nbsp;&nbsp;&nbsp;Chevrette</h1> </div>