鼠标悬停时对文本/单词的缩放效果

Question

我在其他地方找不到解决我问题的方法，这里是：

我想要的功能是，当用户将鼠标悬停在一组3-4个单词上时，它会放大。 到目前为止，我只设法进行了硬编码，这意味着我用span元素分割了所有文本，并在css中增加了功能。 但是我知道这很糟糕：

1. 变得凌乱/看起来难看
2. 无法在大文字的
3. 很难添加更多文本

因此，我想要一种自动执行此“跨分隔文本”的方法，也许使用正则表达式。 但是我不知道如何。 这是我到目前为止提出的

 body { padding: 10px; margin: 10px; } h1 { font-family: Arial; font-size: 20px; color: #000000; } h1 span { display: inline-block; -webkit-transition: all 0.1s ease-out; } h1 span:hover { -webkit-transform: scale(1.5); color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; cursor: pointer; } 

 <h1> <p>Yesterday i went out at a festival where i ate a lot of corn</p> <!--I just split the text with span elements. --> <p><span>Yesterday i went</span> <span>out at a festival</span> <span>where i ate</span> <span>a lot of corn</span></p> </h1> 

Answer 1

我真的不知道缩放，但是如果您想将文本分成3个单词的组，用来换行，则可以使用jquery并执行以下操作：

var p = $('p'); //selector
var originalText = p.text().split(' '); //original text between <p></p>
var spannedText = [];

for (var i = 0; i < originalText.length; i += 3) { //per group of 3 words
 spannedText[i] = ('<span>' + originalText.slice(i,i+3).join(' ') + '</span>'); //wrap the 3 words with <span></span>
}

$(p).html(spannedText.join(' ')); //display the new wrapped text

https://jsfiddle.net/hjmoc1mq/3/