javascript - 它没有记录我悬停在一个元素上

Question

我不明白为什么，但我无法让 CSS 或 javascript “注册”我将鼠标悬停在一个对象上，如果有人有耐心和理解来帮助我，请这样做。

你可以在第 67 和 68 行(JS)找到“onmouseover”和“onmouseleave”事件

“flexcards”在第 90 行的“mainflexbox”中 (HTML)

var main = document.getElementsByTagName('main')[0];

// Binary Towers

let BYcontainer = document.getElementsByClassName('binarycontainer')[0];

function binarytowers() {
    AmountOfTowers = 130;

    for (var iT = 0; iT < AmountOfTowers; iT++) {
        var binarystring = '';
        var lengthmin = 12;
        var lengthmax = 33;
        var looplength = Math.floor(Math.random() * (lengthmax - lengthmin + 1)) + lengthmin;

        for (var iB = 0; iB < looplength; iB++) {
            var amountOfBinaries = Math.round(Math.random())

            binarystring += amountOfBinaries + " ";
        }

        BYcontainer.insertAdjacentHTML("beforeend", "<p>" + binarystring + "</p>")
    }
}

// GET_STARTED Button effects

function GETSTARTED() {
    const startedbuttonarea = document.getElementById('startbutton');
    startedbuttonarea.style.transform = "translateY(2000px)";

    const openingpanel = document.getElementById('E8620409');
    openingpanel.classList.add('openingpanel');
    var showcallers = document.getElementsByClassName('startshowcallers');
    setTimeout(() => {
        openingpanel.style.width = "100%";
        document.body.style.cursor = "none";
        setTimeout(() => {
            for (var iSC = 0; iSC < showcallers.length; iSC++) {
                showcallers[iSC].classList.add('displayingshowcaller');
            }
            setTimeout(() => {
                document.getElementById('start').style.display = "none";
                openingpanel.classList.add('transitionToMain');
                setTimeout(() => {
                    openingpanel.style.display = "none";
                    main.style.display = "block";
                }, 3200);
            }, 12400);
        }, 860);

    }, 2580);
}

// Background cursor 
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function (_) {
    var x = _.clientX;
    var y = _.clientY;
    cursor.style.left = x + 'px';
    cursor.style.top = y + 'px';
});

var flexcards = document.querySelectorAll('.flexcard')

function cursorhover(value) {
    console.log('Action' + value)
}

flexcards.forEach(card => card.addEventListener('onmouseover', cursorhover))
flexcards.forEach(card => card.addEventListener('onmouseleave', cursorhover))


// Onload functions
window.onload = () => {
    binarytowers();
}

body {
    margin: 0 0 0 0;
    position: relative;
    min-width: 100vw;
    min-height: 100vh;
    overflow: hidden;
}

@font-face {
    font-family: 'consola';
    src: url('../fonts/consola.ttf');
}

@font-face {
    font-family: 'codystar';
    src: url('../fonts/codystar.ttf');
}

@font-face {
    font-family: 'library3am';
    src: url('../fonts/Library3am.otf');
}

@font-face {
    font-family: 'helvetica-light';
    src: url('../fonts/helvetica-light.woff');
}

/* Startside */

div#start {
    display: contents;
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 30;
}

.startbackground {
    position: absolute;
    background-image: url("../Images/backgroundImage1.jpg");
    width: 100%;
    height: 100%;
    background-size: contain;
}

.binarycontainer {
    height: 1px;
    font-family: 'consola';
    color: rgb(14, 185, 14);
    display: flex;
    transform: translateX(-4px);
    font-size: 16.5px;
}

.binarycontainer>*:nth-child(1) {
    width: 5px;
    margin-left: .31px;
}

.binarycontainer>* {
    width: 5px;
    margin-right: 11px;
    color: #3af321;
}

.binarycontainer>*:nth-child(even) {
    margin-top: 0px;
    transform: translateY(-7px);
}

.binarycontainer>*:nth-child(odd) {
    margin-top: 2px;
    transform: translateY(-2px);
}

#startbutton {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 50%;
    transition:
        transform .4s cubic-bezier(0.61, -0.19, 0.7, -0.11);
}

.startbuttonarea {
    height: 300px;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.startbuttonbody {
    margin: 100px 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

a.startbuttonlink {
    position: relative;
    display: inline-block;
    font-family: 'library3am';
    padding: 15px 30px;
    color: #2195f3;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    overflow: hidden;
    font-size: 34px;
    text-shadow: 1px 3px 3px #3f3f3f;
    transition:
        background-color 1s,
        text-shadow 1s,
        box-shadow 1.47s;
    ;
}

a.startbuttonlink:hover {
    color: #2c2828;
    text-shadow: 1px 3px 3px transparent;
    background: #3af321;
    box-shadow: 0 0 60px #3af321, 0 0 260px #3af321, 0 0 480px #3af321;
    cursor: pointer;
}

.animateGETSTARTED {
    animation-name: fadeAndScaleSTART;
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(0, 1.07, .72, 1.42);
    animation-iteration-count: 1;
    transform-origin: center bottom;
}

@keyframes fadeAndScaleSTART {
    0% {
        opacity: 0;
        transform: scale3d(0, 0, 0);
    }

    70% {
        opacity: 0;
        transform: scale3d(.75, .75, 1);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

#E8620409 {
    z-index: 20;
}

.openingpanel {
    animation-name: openpanel;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.18, 0.79, 0.85, 0.96);
    animation-iteration-count: 1;
    position: absolute;
    background-image: url("../Images/backgroundImage1.jpg");
    height: 100%;
    animation-delay: .58s;
}

@keyframes openpanel {
    from {
        width: 0%;
        border-right: 120px inset rgb(39, 38, 38);
    }

    to {
        width: 100%;
        border-right: 0px inset rgb(39, 38, 38);
    }
}

.startshow {
    position: relative;
    width: 100%;
    height: 100%;
}

.startshow .topleft,
.startshow .topright,
.startshow .bottomleft,
.startshow .bottomright {
    position: absolute;
    font-size: 1.6rem;
    text-transform: uppercase;
    font-family: 'consola';
    padding: 13%;
    color: #226d543f;
    letter-spacing: 10px;
    text-shadow:
        -1px -1px 0 #226d543f,
        1px -1px 0 #226d543f,
        -1px 1px 0 #226d543f,
        1px 1px 0 #226d543f;
    opacity: 0;
    animation-duration: 3s;
    text-align: center;
}

.startshow .topleft {
    top: 0;
    left: 0;
    margin-left: 3%;
    margin-top: 10%;
    animation-delay: 3.6s;
}

.startshow .topright {
    top: 0;
    right: 0;
    margin-right: 12%;
    margin-top: 4%;
}


.startshow .bottomleft {
    bottom: 0;
    left: 0;
    margin-bottom: 7%;
    margin-left: 15%;
    animation-delay: 1.8s;
}

.startshow .bottomright {
    bottom: 0;
    right: 0;
    margin-right: 6%;
    margin-bottom: 1.2%;
    animation-delay: 5.4s;
}

.startshowcenter {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 4.2rem;
    text-transform: uppercase;
    font-family: 'consola';
    color: #226d54e1;
    letter-spacing: 8px;
    white-space: nowrap;
    padding: 20%;
    text-shadow:
        -1px -1px 0 #226d543f,
        1px -1px 0 #226d543f,
        -1px 1px 0 #226d543f,
        1px 1px 0 #226d543f;
    opacity: 0;
    animation-delay: 6.4s;
    animation-duration: 6.8s;
    text-align: center;
}

.displayingshowcaller {
    animation-name: showcallers;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}

@keyframes showcallers {
    0% {
        opacity: 0;
    }

    10% {
        background: radial-gradient(circle, #171b1bd7 12%, #252b2bd7 12%, #171b1bd7 12%, rgba(0, 0, 0, 0) 30%);
    }

    50% {
        opacity: 1;
    }

    90% {
        background: radial-gradient(circle, #171b1bd7 12%, #252b2bd7 12%, #171b1bd7 12%, rgba(0, 0, 0, 0) 30%);
    }

    100% {
        opacity: 0;
    }
}

.transitionToMain {
    animation-name: transitionToMain;
    animation-direction: alternate;
    animation-duration: 3.2s;
    animation-timing-function: ease;
}

@keyframes transitionToMain {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


/* Main Content */

main {
    position: relative;
    width: 100vw;
    height: 100vh;
    z-index: 20000;
}

.mainwrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: transparent;
}

.maintop {
    flex: 2;
    position: relative;
}

.maintopborder {
    position: absolute;
    bottom: 0;
    background: linear-gradient(transparent, rgba(151, 146, 146, 0.222), transparent);
    width: 100%;
    height: 6px;
}

.topborderRunner {
    position: absolute;
    margin-top: 2px;
    margin-bottom: 2px;
    width: 2.6%;
    height: 2px;
    right: -3%;
    background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.100), rgba(255, 255, 255, 0.205), rgba(255, 255, 255, 0.251), rgba(255, 255, 255, 0.301), rgba(255, 255, 255, 0.357), rgba(255, 255, 255, 0.403), rgba(255, 255, 255, 0.455), rgba(255, 255, 255, 0.508), rgba(255, 255, 255, 0.557), rgba(255, 255, 255, 0.603));
    animation-name: topRunner;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 5s;
    animation-delay: .6s;
}

.maincenter {
    flex: 8;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
}

.centerwrapper {
    width: 92%;
    height: 100%;
    margin: 0 auto 0 24px;
}

.mainflexbox {
    display: flex;
    flex-direction: row;
}

.flexcard {
    flex: 1;
    height: 100%;
    border-right: 21px solid transparent;
}
.flexcard:hover {
    transform: scale(1.1,1.1);
}

.flex1 {
    display: block;
}
#firstflex {
    width: 100%;
    height: 100%;
    border: 2.2px solid rgba(204, 197, 197, 0.616);
    transform: skew(5.5deg);
}

.flex2 {
    display: block;
}
#secondflex {
    width: 100%;
    height: 100%;
    border: 2.2px solid rgba(204, 197, 197, 0.616);
    transform: skew(5.5deg);
}

.flex3 {
    display: block;
}
#thirdflex {
    width: 100%;
    height: 100%;
    border: 2.2px solid rgba(204, 197, 197, 0.616);
    transform: skew(5.5deg);
}

.headline {
    font-family: 'consola';
    color: #226d54e1;
    text-shadow:
    -1px -1px 0 #226d543f,
    1px -1px 0 #226d543f,
    -1px 1px 0 #226d543f,
    1px 1px 0 #226d543f;
    text-align: center;
    font-size: 290%;
    border-bottom: .9px solid rgba(204, 197, 197, 0.616);
}
.extra {
    font-family: 'consola';
    
}

.mainbottom {
    position: relative;
    flex: 2;
}

.mainbottomborder {
    position: absolute;
    background: linear-gradient(transparent, rgba(151, 146, 146, 0.222), transparent);
    width: 100%;
    height: 6px;
    top: 0;
}

.bottomborderRunner {
    position: absolute;
    margin-top: 2px;
    margin-bottom: 2px;
    width: 2.6%;
    height: 2px;
    left: -3%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.100), rgba(255, 255, 255, 0.205), rgba(255, 255, 255, 0.251), rgba(255, 255, 255, 0.301), rgba(255, 255, 255, 0.357), rgba(255, 255, 255, 0.403), rgba(255, 255, 255, 0.455), rgba(255, 255, 255, 0.508), rgba(255, 255, 255, 0.557), rgba(255, 255, 255, 0.603));
    animation-name: bottomRunner;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 5s;
    animation-delay: .6s;
}

@keyframes bottomRunner {
    from {
        left: -3%;
    }
    to {
        left: 105%;
    }
}

@keyframes topRunner {
    from {
        right: -3%;
    }
    to {
        right: 105%;
    }
}

/* Main Background */

.mainbackground {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-image: url('../Images/backgroundImage1.jpg');
}

#cursor {
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid rgb(255, 255, 255);
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    cursor: hidden;
}
.flexcard:hover ~ #cursor {
    width: 80px;
    height: 80xp;
    border: 2px dashed rgb(255, 255, 255);
    animation: cursorhover 5s linear infinite;
}
@keyframes cursorhover {
    from {
        transform: translate(-50%, -50%) rotate(0deg);  
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <link rel="stylesheet" href="./Stylesheets/index.css">

    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
    <meta name="viewport" content="height=device-height, initial-scale=1" charset="utf-8">

    <title>Coding Sanctuary</title>

    <meta name="robots" content="index, follow">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="English">
    <meta name="revisit-after" content="1 days">

    <link rel="icon" href="./Images/forestImg1.png">
</head>

<body>

    <div id="start" style="display: none;">
        <div class="startbackground">
            <div class="binarycontainer">

            </div>
        </div>

        <div id="startbutton">
            <div>
                <div>
                    <div class="startbuttonarea">
                        <div class="startbuttonbody">
                            <a class="animateGETSTARTED startbuttonlink" onclick="GETSTARTED()">
                                Get_Started
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div id="E8620409" style="display: none;">
        <div class="startshow">
            <div class="topleft startshowcallers">
                <!-- Index=0 -->
                my
            </div>

            <div class="topright startshowcallers">
                <!-- Index=1 -->
                welcome
            </div>

            <div class="bottomleft startshowcallers">
                <!-- Index=2 -->
                to
            </div>

            <div class="bottomright startshowcallers">
                <!-- Index=3 -->
                own
            </div>

            <div class="startshowcenter startshowcallers">
                <!-- Index=4 -->
                Coding Sanctuary
            </div>
        </div>
    </div>

    <main>

        <div class="mainbackground">

        </div>

        <div class="mainwrapper">

            <div class="maintop">
                <div class="maintopborder">
                    <div class="topborderRunner"></div>
                </div>
            </div>

            <div class="maincenter">
                <div class="centerwrapper">
                    <div class="mainflexbox">
                        <div class="flex1 flexcard">
                            <div id="firstflex">
                                <div class="headline">
                                    About Me
                                </div>
                            </div>
                        </div>
                        <div class="flex2 flexcard">
                            <div id="secondflex">
                                <div class="headline">
                                    Portfolio
                                </div>
                            </div>
                        </div>
                        <div class="flex3 flexcard">
                            <div id="thirdflex">
                                <div class="headline">
                                    Contact
                                </div>
                                <div class="extra">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mainbottom">
                <div class="mainbottomborder">
                    <div class="bottomborderRunner"></div>
                </div>
            </div>

        </div>
        <div id="cursor"></div>
    </main>


    <script type="text/javascript" src="./Scripts/JavaScripts/index.js"></script>
</body>

</html>

Answer 1

如果你想在你的按钮上注册任何东西，你不能在 z-index 上有 -10。页面上有几个对象占据了页面的 100%，然后在按钮前面

main {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: -10;
}