JavaScript DOM Elements

Question

Я работаю над упражнением JSBin. Вот ссылка:

http://jsbin.com/sevirufite/1/edit?html,css,js,console,output

Я взял слова из HEStext DIV, разделить их в массив, добавлены уникальные пролеты для каждого слова (word1, WORD2, word3 и т.д.), и хотел бы чтобы, нажав кнопку трансформирования, иметь возможность навешивать каждое слово и поворачивать его на желтый, а затем вернуться к нормальному движению (размывание?) до другого слова. Благодарный, если вы можете научить меня ...!

Answer 1

Да, все, что вам нужно, это CSS, чтобы выполнить то, что вы хотите, с помощью правила :hover. (Вы также хотите очистить HTML после, вы разделили слова).

Вот обновленный jsbin, а также код здесь, ниже: http://jsbin.com/muceyimoje/4/

var HEStext = document.getElementById("HEStext"); 
 
var transformBtn = document.getElementById("transformButton"); 
 

 
transformBtn.addEventListener('click', function() { 
 
    var wordArray = HEStext.innerText.split(" "); 
 
    HEStext.innerHTML = ""; 
 
    for (var i = 0; i < wordArray.length; i++) { 
 
    var spanNode = document.createElement("span"); 
 
    spanNode.appendChild(document.createTextNode(wordArray[i])); 
 
    HEStext.appendChild(spanNode); 
 
    HEStext.appendChild(document.createTextNode(' ')); 
 
    } 
 
});

body { 
 
    background-color: white; 
 
} 
 

 
#HEStext > span { 
 
    background-color: white; 
 
    transition: background-color 0.25s ease-in-out; 
 
    -webkit-transition: background-color 0.25s ease-in-out; 
 
    -moz-transition: background-color 0.25s ease-in-out; 
 
} 
 

 
/* When we hover, change the background to yellow */ 
 
#HEStext > span:hover { 
 
    background-color: yellow; 
 
}

<h1>Unit 3 Project A: Jerald Dana Cole</h1> 
 
<p>The DIV that will serve as your input (and output) is here: 
 

 
<div id="HEStext">It’s that time of year when you clean out your closets, dust off shelves, and spruce up your floors. Once you’ve taken care of the dust and dirt, what about some digital cleaning? Going through all your files and computers may seem like a daunting task, but we found ways to make the process fairly painless. 
 
</div> 
 
<br><br> 
 
<input type="button" id="transformButton" name="transformButton" value="Transform!" />