为什么我的代码可以在REPL中工作，而不能在文本编辑器(VSCode)中工作？

Question

我正在做一个闪卡(这些都是虚构的单词和定义)，它在REPL中工作得很完美，但当我试图让它在VSCode中工作时，它会让所有有but的- the卡片在悬停时翻转(就像它应该做的那样)，但卡片的背面只是正面的镜子，即使我有背面的可见性:隐藏在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

Short answer

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

Long answer

这对于REPL和IDE来说不是问题。这是包含您的代码的REPL。它不是完美无缺的。每次悬停时，旋转都会闪烁。卡片的背面并不总是在前面，但当它发生时，这是因为它旋转了不止一次。

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

您需要在父.maincontainer上设置悬停侦听器，该侦听器从不旋转，因此不存在鼠标焦点，因此在后续变换中也不会闪烁。

credits