我希望contentadiv的伪元素的值::after随着 6 个子元素的索引号而改变div,将鼠标悬停在这 6 个 div 中的每一个上。
我坚持创建 6 个 div 的第一个数组和另一个包含 6 个信息的数组以显示相同的对应索引号。
数组 #1 将是 [.hov-sq:nth-child(1), .hov-sq:..] 并且数组 #2 将是每次悬停时更改的 'data-content' 属性的内容 ['digital游牧民族','数字开发者','超人','等等...]
到目前为止,我设法使用这个 jQuery 代码和 CSS 代码更改了伪元素内容。
$('.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>
ibeautiful
宝慕林4294392
相关分类