不使用hover外部CSS样式实现hover鼠标悬停改变样式

要实现不使用:hover外部CSS样式实现hover鼠标悬停改变样式，我们可以利用JavaScript实现。

实现步骤如下：

1. 给HTML元素添加鼠标移入和鼠标移出事件监听。

2. 在事件监听函数中，通过修改元素的className或style来改变元素的样式。

具体实现示例：

示例一：改变按钮的背景颜色

HTML代码：

<button id="myBtn">点击我</button>

JavaScript代码：

var btn = document.getElementById("myBtn");
btn.onmouseenter = function() {
  this.style.backgroundColor = "#FFA500"; // 悬停时按钮背景变为橙色
};
btn.onmouseleave = function() {
  this.style.backgroundColor = ""; // 移出时按钮背景颜色恢复默认值
};

示例二：改变链接的文字颜色

HTML代码：

<a id="myLink" href="#">点击我</a>

JavaScript代码：

var link = document.getElementById("myLink");
link.onmouseenter = function() {
  this.style.color = "red"; // 悬停时链接文字颜色变为红色
};
link.onmouseleave = function() {
  this.style.color = ""; // 移出时链接文字颜色恢复默认值
};

以上两个示例都是通过JavaScript来实现鼠标悬停时改变元素样式的效果，而不使用:hover外部CSS样式。如果不需要实现复杂的动画效果，这种方法也可以达到良好的效果。