背景のあるホバーの単語を循環する

Question

背景の画像の上にある単語のリストをどのように循環させることができますか？たとえば、フレーズが「Hello World」であるとしましょう。フレーズが浮かび上がったときに、さまざまな言語で「hello」という単語のリストを繰り返し表示します。どうすればいい？

Answer 1

「世界」を変えずに「こんにちは」を変更することは実際には意味がありません。特に、いくつかの言語では「こんにちは」と言う単語が2つ以上必要です単語列は実際には「世界のこんにちは」かもしれません。

しかし、その問題を無視：

var words = ["Hello", "Hi", "Yo", "Aloha", "Bonjour"] 
 
var w = 0 
 
var interval 
 

 
var container = document.querySelector(".greeting") 
 
var word = container.querySelector("span") 
 

 
container.addEventListener("mouseover", function() { 
 
    interval = setInterval(function() { 
 
    word.textContent = words[w = (w + 1) % words.length] 
 
    }, 400) 
 
}); 
 
container.addEventListener("mouseout",() => clearInterval(interval))

.greeting { 
 
    background-image: url("whatever"); 
 
}

<div class="greeting"><span>Hello</span> world</div>