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

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/