：D 先放参考文章的地址 : wow.techbrood.com/fiddle/9635
上完成效果：
说明：用到的事件是 mouseout 和 mouseover。鼠标悬停在目标字符上时，给目标字符和左右字符加不同的class 名，通过不同的类名控制字符的样式。鼠标从字符的上级节点移出时，把同级节点的类名移除掉。
附上完整代码：
<template>
<div class="dynamic-title" @mouseout="outHover">
<span
v-for="(item, index) in this.LETTERS"
:key="index"
@mouseover="inhover"
>{{ item }}</span
>
</div>
</template>
<script>
const letters = [
"新",
"闻",
"资",
"讯",
"|",
"关",
"注",
"动",
"态",
"绽",
"放",
"精",
"彩",
];
export default {
name: "DynamicTitle",
created() {
this.LETTERS = letters;
},
methods: {
inhover(e) {
if (!e.target) {
return;
}
e.target.classList = ["on"];
if (e.target.nextElementSibling) {
e.target.nextElementSibling.classList = ["side"];
e.target.nextElementSibling.classList = ["side2"];
}
if (e.target.previousElementSibling) {
e.target.previousElementSibling.classList = ["side"];
e.target.previousElementSibling.classList = ["side2"];
}
},
outHover(e) {
let doms = e.currentTarget.children;
for (let i = 0, len = doms.length; i < len; i++) {
doms[i].classList = [];
}
},
},
};
</script>
<style lang="less" scoped>
.dynamic-title {
font-size: 36px;
font-family: PingFang SC;
color: #231815;
text-align: center;
letter-spacing: 2px;
span {
display: inline-block;
cursor: pointer;
padding: 0 0.2em;
position: relative;
-webkit-transition: all 0.15s linear;
transition: all 0.15s linear;
}
}
span.on {
-webkit-transform: scale(2.2);
-ms-transform: scale(2.2);
transform: scale(2.2);
text-shadow: 0 0 1px #fff;
}
span.side {
-webkit-transform: scale(1.65);
-ms-transform: scale(1.65);
transform: scale(1.65);
text-shadow: 0 0 1px rgba(255, 255, 255, 0.85);
}
span.side2 {
-webkit-transform: scale(1.35);
-ms-transform: scale(1.35);
transform: scale(1.35);
text-shadow: 0 0 2px rgba(255, 255, 255, 0.7);
}
</style>
