懸停展開，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

            
            <div class="container">
    <div class="card">
        <div class="card__inner">
            <picture>
                <img src="https://cloud-static.com/gallery/1001/santorini-4996846_1280.jpg" alt="">
            </picture>
        </div>
    </div>
    <div class="card">
        <div class="card__inner">
            <picture>
                <img src="https://cloud-static.com/gallery/1001/5.jpg" alt="">
            </picture>
        </div>
    </div>
    <div class="card">
        <div class="card__inner">
            <picture>
                <img src="https://cloud-static.com/gallery/1001/water-lilies-8307632_1280.jpg" alt="">
            </picture>
        </div>
    </div>
    <div class="card">
        <div class="card__inner">
            <picture>
                <img src="https://cloud-static.com/gallery/1001/after-the-rain-8686213_1280.jpg" alt="">
            </picture>
        </div>
    </div>
    <div class="card">
        <div class="card__inner">
            <picture>
                <img src="https://cloud-static.com/gallery/711718052693_.pic.jpg" alt="">
            </picture>
        </div>
    </div>
    <div class="card">
        <div class="card__inner">
            <picture>
                <img src="https://cloud-static.com/gallery/731718052697_.pic.jpg" alt="">
            </picture>
        </div>
    </div>
    <div class="card">
        <div class="card__inner">
            <picture>
                <img src="https://cloud-static.com/gallery/1001/4.jpg" alt="">
            </picture>
        </div>
    </div>
    <div class="card">
        <div class="card__inner">
            <picture>
                <img src="https://cloud-static.com/gallery/1001/8.jpg" alt="">
            </picture>
        </div>
    </div>
    <div class="card">
        <div class="card__inner">
            <picture>
                <img src="https://cloud-static.com/gallery/1001/santorini-4263036_1280.jpg" alt="">
            </picture>
        </div>
    </div>
    <div class="card">
        <div class="card__inner">
            <picture>
                <img src="https://cloud-static.com/gallery/671718052688_.pic.jpg" alt="">
            </picture>
        </div>
    </div>
</div>

编辑器加载中

</body>

SCSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

            
            body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
}

.container {
    display: flex;
    flex: 1;
    max-width: 1440px;
    padding: 0 3rem;
    margin: 0 auto;
    overflow: auto;
    align-items: flex-start;
    justify-content: center;
}

.card {
    flex: 1 1 1%;
    position: relative;
    opacity: 0.2;
    transition: flex 600ms cubic-bezier(0.25, 1, 0.5, 1), opacity 250ms ease;

    &:hover {
        flex-basis: 30%;
    }

    &__inner {
        margin: 0.25rem;
        background: #fff;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    picture {
        width: 100%;
        height: 0;
        padding-bottom: 600px;
        overflow: hidden;
        position: relative;

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    &.is-active,
    &:hover {
        opacity: 1;
    }

    // Card margin-top pattern - simplified
    &:nth-child(2),
    &:nth-child(5),
    &:nth-child(9) {
        margin-top: 0;
    }

    &:nth-child(2),
    &:nth-child(4),
    &:nth-child(6),
    &:nth-child(8),
    &:nth-child(10) {
        margin-top: 2.5%;
    }

    &:nth-child(3),
    &:nth-child(7) {
        margin-top: 5%;
    }
}

编辑器加载中

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

            
            const cards = document.querySelectorAll(".card");

// Add "is-active" class to all cards initially
cards.forEach(card => card.classList.add("is-active"));

// Use event delegation for better performance
document.addEventListener("mouseenter", event => {
  const card = event.target.closest?(".card");
  if (card) {
    cards.forEach(c => c.classList.remove("is-active"));
    card.classList.add("is-active");
  }
}, true);

document.addEventListener("mouseleave", event => {
  const card = event?.target?.closest?(".card");
  if (card) {
    cards.forEach(c => c.classList.add("is-active"));
  }
}, true);

编辑器加载中

预览

控制台