如何为JavaScript动态生成的内联样式链接添加Hover效果？

看起来你遇到的问题主要是内联样式无法定义:hover伪类，再加上代码里存在DOM标签未闭合的小问题，导致hover效果无法正常生效。下面给你两种实用的解决方案：

方法一：使用CSS伪类（推荐，简洁高效） #

CSS的:hover伪类会自动对后续动态生成的元素生效，只要给链接加上专属类名，就能轻松设置hover样式：

步骤1：修正动态生成代码的标签闭合并添加类名 #

你当前的代码里缺少了闭合的</a></span></span>标签，这会破坏DOM结构，先修正这个问题，同时给链接添加一个类名方便样式定位：

if (readmore) { 
  var link = wrapper.parent().find('h3 a').attr('href'); 
  // 补全闭合标签，添加专属类名read-more-link
  wrapper.append('<br /><br /><span style="float: none;"><span style="display:block; background: #fff; border: 1px solid #000; text-align: center; text-spacing: 2px; text-transform:uppercase; font-weight: bold; padding: 5px 25px 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; height: 30px; margin-left: 215px;"><a href="' + link + '" style="color: #000" class="read-more-link">' + readmore + '</a></span></span>'); 
} 
wrapper.append('<hr>'); 
$('hr').css('width','100%').css('background-color','transparent').css('border-width',0);

步骤2：添加CSS hover样式 #

在页面的<style>标签或者外部样式表中，添加以下样式：

.read-more-link:hover {
  color: #ff4500; /* 替换成你想要的hover文字颜色 */
  background-color: #f8f8f8; /* 可选：hover时的背景色 */
  /* 还可以添加其他效果，比如文字阴影、边框变化等 */
}

这样只要鼠标悬停在动态生成的链接上，样式就会自动生效。

方法二：使用jQuery事件委托（适合复杂交互场景） #

如果你的hover效果需要配合JS逻辑（比如动画、数据交互），可以用事件委托绑定hover事件（动态生成的元素无法直接用普通的.hover()绑定）：

// 绑定到document或更接近的父元素，性能更优
$(document).on('mouseenter', '.read-more-link', function() {
  $(this).css({
    'color': '#ff4500',
    'background-color': '#f8f8f8'
  });
}).on('mouseleave', '.read-more-link', function() {
  // 恢复原样式
  $(this).css({
    'color': '#000',
    'background-color': 'transparent'
  });
});

这种方式会监听所有后续生成的.read-more-link元素的鼠标进入/离开事件，确保hover效果正常触发。

关键提醒 #

• 优先选择CSS伪类方案：相比JS事件，CSS性能更好，代码也更简洁易维护。
• 一定要修复标签闭合问题：未闭合的标签会导致DOM结构混乱，直接影响样式和JS事件的正常工作。

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