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> Chevrette</h1>
</div>The page is live here for a proper display: http://vmax.laurentchevrette.digital/
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> Chevrette</h1>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments