我希望contentadiv的偽元素的值::after隨著 6 個子元素的索引號而改變div，將鼠標懸停在這 6 個 div 中的每一個上。我堅持創(chuàng)建 6 個 div 的第一個數(shù)組和另一個包含 6 個信息的數(shù)組以顯示相同的對應(yīng)索引號。數(shù)組 #1 將是 [.hov-sq:nth-child(1), .hov-sq:..] 并且數(shù)組 #2 將是每次懸停時更改的 'data-content' 屬性的內(nèi)容 ['digital游牧民族'，'數(shù)字開發(fā)者'，'超人'，'等等...]到目前為止，我設(shè)法使用這個 jQuery 代碼和 CSS 代碼更改了偽元素內(nèi)容。$('.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>
如何迭代 HTML <div> 元素數(shù)組并為每個索引號設(shè)置不同樣式的另一個元素？
冉冉說
2023-05-19 14:43:53
