为什么我的代码在 REPL 中有效，但在文本编辑器 (VSCode) 中无效？

Question

我正在做一个抽认卡位（这些都是由单词和定义组成），它在 REPL 中完美运行，但是当我尝试让它在 VSCode 中运行时，它变得全是错误的 - 卡片翻转悬停时（就像它应该的那样），但卡片的背面只是正面的镜子，即使我有 backface-visibility:hidden 在 CSS 中。代码如下：

<script>
    let zoushEntries = ["mugwort", "noice", "smolb", "gar", "hirum", "sion", "shlep", "akudema", "akilmda", "alsun", "rhema", "pith", 
"hrish","arnik", "yesop", "vsu", "slump", "fado"];
    let zoushIPA = ["[məgwɚt]", "[noice]","[smulb]" ];
    let zoushGloss = ["the semi-sweet rind of a melon", "To be full, to the point of discomfort","a loogie once it has hit the ground", "pirate affirmative; derivative of 'yar'", "to hold fast, steady", "a piece of cloth", "when there is no alternative", "i will be glad", "it's in my mind", "to dig deeper into a vat", "a tree that talks back", "the sagging bit of rotten gums", "the sound of stars sundering", "sweat glands", "fable man", "muffled voices from a further room", "to be as a moth to a flame", "to sing to the sea where a ship used to be" ];
    
    function showMore() {
        var dots = document.getElementById("dots");
        var revealedText = document.getElementById("more");
        var btnText = document.getElementById("myBtn");
        
        if (dots.style.display === "none"){
            dots.style.display = "inline";
            btnText.innerHTML = "Show more";
            revealedText.style.display = "none";
        } else {
            dots.style.display = "none";
            btnText.innerHTML = "Show less";
            revealedText.style.display = "inline";
        }
    }
    
    function clicked() {
        var x = document.getElementsByClassName('thecard')[0];
            x.style.transform = 'rotateY(180deg)';
    }
    
</script>


<style>
    :global(body) {
        margin: 0;
        padding: 0;
    }
    
    .maincontainer {
        margin-top: 10px;
        display: inline-flex;
        position: relative;
        width: 200px;
        height: 100px;
    }
    
    .thecard{
        width: 100%;
        height: 100%;
        position: absolute;
        transform-style: preserve-3d;
        transition: all 0.5s ease;
        
    }
    
    #more {
        display:none;
    }
    
    .thecard:hover{
        width: 100%;
        height: 100%;
        transform: rotateY(180deg);
        cursor: pointer;
    }
    
    
    
    .thefront{
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: hidden;
        color: #333;
        text-align: center;
        font-size: 18px;
    }
    
    .theback{
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        color: white;
        text-align: center;
        font-size: 17px;
        transform: rotateY(180deg);
    }

    
</style>

<svelte:head>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</svelte:head>

<div class="maincontainer">
    <div class="thecard" on:click={clicked}>
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[0]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg" >{zoushGloss[0]}</div>
    </div>
</div>

<div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[1]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg">{zoushGloss[1]}</div>
    </div>
</div>

<div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[2]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg">{zoushGloss[2]}</div>
    </div>
</div>

<div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[3]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg" >{zoushGloss[3]}</div>
    </div>
</div>

<div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[4]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg">{zoushGloss[4]}</div>
    </div>
</div>

<div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[5]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg">{zoushGloss[5]}</div>
    </div>
</div>
<div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[6]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg" >{zoushGloss[6]}</div>
    </div>
</div>

<div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[7]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg">{zoushGloss[7]}</div>
    </div>
</div>

<div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[8]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg">{zoushGloss[8]}</div>
    </div>
</div>

<div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[9]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg" >{zoushGloss[9]}</div>
    </div>
</div>

<div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[10]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg">{zoushGloss[10]}</div>
    </div>
</div>

<div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[11]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg">{zoushGloss[11]}</div>
    </div>
</div>

<span id="dots"><br>...</span><span id="more">

<div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[12]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg">{zoushGloss[12]}</div>
    </div>
</div>

<div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[13]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg">{zoushGloss[13]}</div>
    </div>
</div>
    
    <div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[14]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg">{zoushGloss[14]}</div>
    </div>
</div>
    
    <div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[15]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg">{zoushGloss[15]}</div>
    </div>
</div>
    
    <div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[16]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg">{zoushGloss[16]}</div>
    </div>
</div>
    
    <div class="maincontainer">
    <div class="thecard">
        <div class="thefront flex p-6 bg-blue-200 shadow-lg rounded-lg">{zoushEntries[17]}</div>
        <div class="theback flex p-6 bg-teal-300 shadow-lg rounded-lg" >{zoushGloss[17]}</div>
    </div>
</div>
    
</span><br><br>
<button on:click={showMore} id="myBtn" class="text-white bg-blue-500 hover:bg-blue-400 rounded-sm p-1">Show more</button>

Answer 1

简答

您应该将.thecard:hover { ... } 更改为.maincontainer:hover .thecard { ... }。这是working REPL。

长答案

这不是 REPL 与 IDE 的问题。这是带有您的代码的REPL。它不能完美地工作。每次悬停时旋转都会闪烁。卡片的背面并不总是正面，但如果发生这种情况，那是因为它旋转了不止一次。

当您在悬停时旋转.thecard 时，它会旋转一点，离开鼠标焦点，然后再次进入鼠标焦点。这个新入口本身就是一个新的悬停，会触发另一个旋转。

您需要在永远不会旋转的父 .maincontainer 上设置悬停侦听器，因此永远不会存在鼠标焦点，因此永远不会随着后续变换而闪烁。

credits