鼠标移上去显示动画边框的js代码

要在鼠标悬停时显示动画边框，可以使用JavaScript结合CSS来实现。以下是一个简单的示例，展示了如何使用JavaScript和CSS来创建一个鼠标悬停时显示动画边框的效果。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Border</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box" id="animatedBox">Hover over me!</div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
.box {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border 0.5s ease;
    border: 4px solid transparent;
}

.box:hover {
    border-image: linear-gradient(to right, red, blue);
    border-image-slice: 1;
}

JavaScript代码

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const box = document.getElementById('animatedBox');

    box.addEventListener('mouseenter', function() {
        this.style.borderImage = 'linear-gradient(to right, red, blue)';
        this.style.borderImageSlice = '1';
    });

    box.addEventListener('mouseleave', function() {
        this.style.borderImage = '';
        this.style.borderImageSlice = '';
    });
});

解释

HTML结构：创建一个简单的div元素，并为其添加一个ID以便在JavaScript中引用。
CSS样式：
- .box类定义了基本的样式，包括宽度、高度、背景颜色和边框。
- transition属性用于平滑过渡边框的变化。
- :hover伪类定义了鼠标悬停时的边框样式，使用border-image属性创建一个渐变效果。