同一行上的文本和图标反应原生 - Javascript

在一个 Web 应用程序中，有时候需要在页面上显示文本和图标，并且能够通过鼠标交互来触发相关事件。本文将介绍如何使用 JavaScript 实现文本和图标之间的交互效果。

使用 HTML 和 CSS

首先，我们可以使用 HTML 和 CSS 来实现文本和图标的基本布局和样式。下面是一个示例：

<div class="item">
  <span class="text">文本</span>
  <span class="icon"><i class="iconfont">&#xe63b;</i></span>
</div>

.item {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0 10px;
  cursor: pointer;
}

.text {
  display: inline-block;
}

.icon {
  display: inline-block;
  margin-left: 10px;
}

.icon i {
  font-size: 16px;
  color: #666;
}

在上面的示例中，我们使用了一个 div 元素来包含文本和图标，样式如下：

• display: inline-block; 是为了让元素在行内显示。
• height 和 line-height 是为了让元素有适当的高度和垂直居中。
• border 和 border-radius 是为了让元素有适当的边框和圆角。
• padding 是为了让元素内部有适当的间距。
• cursor 是为了显示鼠标指针。

对于文本，我们使用了一个 span 元素，并设置了 display: inline-block;。对于图标，我们使用了一个 span 元素，并添加了一个 i 元素，里面使用了一个字体图标，如下：

<i class="iconfont">&#xe63b;</i>

其中，iconfont 是自定义的字体图标库类名， 是字体图标的 Unicode 编码。

使用 JavaScript 实现交互效果

为了让文本和图标之间能够产生交互效果，我们需要使用 JavaScript 来实现。具体来说，我们可以使用以下步骤：

1. 获取文本和图标元素。
2. 给元素添加鼠标进入和移出事件监听器，分别对应两个回调函数。
3. 在鼠标进入回调函数中给文本添加类名，改变图标颜色。
4. 在鼠标移出回调函数中移除类名，恢复图标颜色。

下面是一个示例代码片段：

const text = document.querySelector(".text")
const icon = document.querySelector(".icon i")

function handleMouseEnter() {
  text.classList.add("highlight")
  icon.style.color = "#f00"
}

function handleMouseLeave() {
  text.classList.remove("highlight")
  icon.style.color = "#666"
}

text.addEventListener("mouseenter", handleMouseEnter)
text.addEventListener("mouseleave", handleMouseLeave)

在上面的示例中，我们使用了 querySelector 方法获取文本和图标元素，然后定义了鼠标进入和移出回调函数 handleMouseEnter 和 handleMouseLeave，分别进行文本和图标的样式修改，如下：

• 在 handleMouseEnter 中，我们给文本添加了一个名为 highlight 的类名，用于修改文本的样式。
• 在 handleMouseEnter 中，我们改变了图标的颜色。
• 在 handleMouseLeave 中，我们移除了 highlight 类名，恢复了文本的样式。
• 在 handleMouseLeave 中，我们恢复了图标的颜色。

最后，我们使用 addEventListener 方法给元素添加了鼠标进入和移出事件监听器，分别对应 handleMouseEnter 和 handleMouseLeave 回调函数。

总结

通过以上步骤，我们可以在 Web 应用程序中实现文本和图标之间的交互效果。具体来说，我们使用了 HTML 和 CSS 实现了基本布局和样式，使用 JavaScript 实现了鼠标交互效果。