添加第二个JavaScript函数后首个函数失效，如何修复？

我开发的页面包含两个功能：

• 鼠标悬停时切换不同文本的按钮，功能和谷歌的“I'm Feeling Lucky”按钮一致；
• 页面加载时自动生成词云。

添加词云功能后按钮功能失效，未发现重复变量，不清楚原因，以下是我的代码：

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="top"></div>

<button>
  <ul>
    <li>I'm Feeling Lucky</li>
    <li>I'm Feeling Alone</li>
    <li>I'm Feeling Absence</li>
    <li>I'm Feeling Void</li>
    <li>I'm Feeling Deficit</li>
    <li>I'm Feeling Lack</li>
  </ul>  
</button>

CSS代码 #

* {
  box-sizing: border-box;
}

button {
  margin: 10% auto;
  display: block;
  padding: 0;
  appearance: none;
  overflow: hidden;
  height: 50px;
  border: #DCDCDC 1px solid;
  background-color: #F2F2F2;
  background-image: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
  background-image: -moz-linear-gradient(top, #F5F5F5, #F1F1F1);
}

button:hover {
  border-color: darken(#DCDCDC, 5%);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px;
  background-image: -webkit-linear-gradient(top, #f8f8f8, #F1F1F1);
  background-image: -moz-linear-gradient(top, #f8f8f8, #F1F1F1);
}

button:active {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 1px;
  outline: none !important;
}

button:focus {
  outline: 1px #08c solid;
}

button ul {
  margin-top: 0;
  padding: 0;
  list-style: none;
  -webkit-transition: margin-top .45s ease-in-out;
  -moz-transition: margin-top .45s ease-in-out;
  transition: margin-top .45s ease-in-out;
}

button ul li {
  display: block;
  height: 55px;
  padding: 1em;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

span {
  font-size: 12px;
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

JavaScript代码 #

// Interval and words for placing words randomly
var interval = 100; // Interval between word placements (in milliseconds)

var words = [
  'JavaScript',
  'Angular',
  'ReactJS',
  'Three.js',
  'Moment',
  'Redux',
  'Chart.js',
  'Ember',
  'BackboneJS',
  'Underscore',
  'Reveal.js',
  'Babel',
  'Modernizr',
  'CoffeeScript',
  'TypeScript',
  'Gulp',
  'NodeJS',
  'Select2',
  'Bower',
  'NPM',
  'Express',
  'Pdf.js',
  'Full Page.js',
  'Foundation',
  'Bootstrap',
  'Mocha',
  'Jasmine',
  'D3.js',
  'Mustache.js',
  'Handlebars',
  'jQuery Validation',
  'Lodash',
  'RequireJS',
  'IntroJS',
  'Typeahead.js',
  'Scrollr',
  'MooTools',
  'Prototype',
  'YUI',
  'Dojo',
  'Raphael',
  'Knockout'
];

// Get the width and height of the viewport
var width = window.innerWidth;
var height = window.innerHeight;

// Function to place words at random positions
var wordPlacementInterval = setInterval(function() {
  var currentWord = words.shift();
  if (currentWord) {
    var word = document.createElement('span');
    word.innerHTML = currentWord;
    // Randomly position the word within the viewport
    word.style.top = Math.floor(Math.random() * height) + 'px';
    word.style.left = Math.floor(Math.random() * width) + 'px';
    document.body.appendChild(word);
  }
  else {
    clearInterval(wordPlacementInterval);
  }
}, interval);

$("button").hover(function(){
  var self = this;
  var pos = -(Math.floor(Math.random() * 5) + 1) * 55
  setTimeout(function(){
    $(self).find("ul").css("margin-top", pos + "px");
  }, 500);
}, function(){
  $(this).find("ul").css("margin-top", "0px");
})

问题原因 #

词云生成的<span>元素设置了position: fixed且宽高为100vw/100vh，这些元素会完全覆盖在按钮上方，导致按钮无法接收到鼠标hover事件。

修复方案 #

1. 给按钮添加更高的z-index，确保它在词云元素之上；
2. 修改词云<span>的样式，去掉全屏的宽高设置，让它只包裹自身文字，避免遮挡交互区域。

修改后的关键代码如下：

修改后的CSS（关键部分）

button {
  /* 原有样式保留，新增以下两行 */
  position: relative;
  z-index: 9999;
}

span {
  font-size: 12px;
  position: fixed;
  /* 去掉全屏宽高，改为自适应 */
  width: auto;
  height: auto;
  /* 取消flex居中，让文字正常显示 */
  display: inline-block;
  overflow: hidden;
}

可选优化（词云效果增强）

可以在创建词云span时，随机设置字体大小，让词云效果更真实：

// 在创建word元素后添加以下代码
word.style.fontSize = Math.floor(Math.random() * 16 + 12) + 'px';

修改后，按钮的hover功能和词云生成功能就能正常共存了。

内容的提问来源于stack exchange，提问作者Sarah Chekfa