All geek questions in one place

How to prevent the <button> tag from disabling my: hover?

I wrapped my #welcome in one button, so this would have an effect when pressed. The button seems to do nothing, and the initial functionality (: hover) of my element was disabled for some reason. How to do it?

HTML followed by CSS and then JavaScript (all three are in separate files):

<!DOCTYPE html>
<html lang="en-US">
    <head>  
        <meta name="keywords" content="Jerrell, Cockerham, Blogs, Podep, Tramx">
        <meta name="description" content="Jerrell Cockerham website for his organized thoughts and feelings.">
        <meta name="author" content="Jerrell Cockerham">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jerrell Cockerham</title>    
    </head>
    <body style="background-color: black;">
        <div class="top-bar">
            <div id="strip">
                <span style="color: #808080">_</span>
            </div>
            <a href="D:\Coding projects\My personal website\jerrell.html">
                <h1 id="name">
                    <span id="jerrell">Jerrell</span> 
                    <span id="cockerham">Cockerham</span>
                </h1>
            </a>
            <h4 id="options">
                <span id="splits">|</span> 
                <a href="#" style="text-decoration: none"><span id="go">About</span></a> 
                <span id="splits">|</span> 
                <a href="#" style="text-decoration: none"><span id="go-two">Search</span></a> 
                <span id="splits">|</span>
            </h4> 
        </div>
        <div class="welcome">
            <button onclick="openUp()"><p id="welcome">Click to Begin</p></button>
        </div>
        <div class="mncourse">
            <table id="tissue">
                <tr id="podep">
                    <td id="podepdat">
                            <p id="high1"><a href="D:\Coding projects\My personal website\podep.html" style="text-decoration: none; color: #66ffff;">Positively Dependent</a></p>
                            <p id="low1"><a href="D:\Coding projects\My personal website\podep.html" style="text-decoration: none; color: white;">Attempts to poetically express my feelings.</a></p>
                    </td>
                    <td id="tramxdat">
                        <p id="high2"><a href="D:\Coding projects\My personal website\tramx.html" style="text-decoration: none; color: #66ffff;">Trail Mix</a></p>
                        <p id="low2"><a href="D:\Coding projects\My personal website\tramx.html" style="text-decoration: none; color: white;">Everything I find interesting in mathematics.</a></p>
                    </td>
                </tr>
            </table>
        </div>
        <b><p class="cred">Photo taken with iPhone</p></b>
    </body>
    <link href="jerrell.css" rel="stylesheet" type="text/css" />    
    <script src="jerrell.js"></script>
</html>


/* #66ffff (blu), white (wht), #535353 (gry) */



body {
    background: url(intric.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 1200px;
}

#name {
    font-family: Trebuchet MS;
    position: fixed;
    top: -20px;
    z-index: 1;
}

#jerrell {
    color: #66ffff;
}

#cockerham {
    color: white;
}

#strip {
    position: fixed;
    left: -50px;
    top: -10px;
    background-color: #535353;
    width: 2000px;
    height: 50px;
    opacity: .9;
}

#options {
    font-family: Trebuchet MS;
    position: fixed;
    right: 5px;
    top: -11px;
    z-index: 1;
}

#splits {
    color: white;
}

#go {
    color: #66ffff;
}

#go-two {
    color: #66ffff;
}

#go:hover {
    color: white;
}

#go-two:hover {
    color: white;
}

.welcome {

}

#welcome {
    position: fixed;
    font-family: Trebuchet MS;
    width: 400px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border: 0px;
    text-align: center;
    top: 42%;
    color: white;
    font-size: 50px;
    z-index: 4;
}

#welcome:hover {
    opacity: .7;
}

.mncourse {
    pointer-events: none;
    position: fixed;
    text-align: center;
    left: 0;
    right: 0;
    top: 42%;
}

#tissue {
    margin-left: auto;
    margin-right: auto;
    border-spacing: 20px;
}

#high1 {
    font-family: Trebuchet MS;
    font-size: 32px;
}

#low1 {
    font-family: Trebuchet MS;
    font-size: 20px;
}

#high2 {
    font-family: Trebuchet MS;
    font-size: 32px;
    color: #66ffff;
}

#low2 {
    font-family: Trebuchet MS;
    color: white;
    font-size: 20px;
}

td {
    padding: 15px;
}

#podepdat {

}

#tramxdat {

}

.cred {
    position: relative;
    height: 25px;
    width: 250px;
    top: 1180px;
    font-family: Trebuchet MS;
    color: white;
}


function openUp() {
    document.getElementById("welcome").style.pointer-events = "auto";
    document.getElementById("strip").style.color = "red";
}
+4
source share
3 answers

First, you need to put your buttonelement in place of the pone contained in it. Now you have it from the top left. So, you create a css rule for the element .welcome buttonand move all the positioning rules from pto it.

:hover .welcome button.

, , javascript :

document.getElementById("welcome").style.pointer-events = "auto";

to:

document.getElementById("welcome").style.pointerEvents = "auto";

:

document.getElementById("welcome").style.setProperty("pointer-events","auto");

.

( div, , , ):

https://jsfiddle.net/h2wchead/1/

+1

, , rootdirectory. XAMPP WAMP MAMP NANP. XAMPP. - ( ). , , <a href=" <!-- HERE Spaces . . . . . --> ">. . %20, !

, , , , , , , script openUp(). , JS, . , , script .

CSS , . , DIV, 2 CLASSES CSS, script, ,

<html>
    <head>
        <title>Your title</title>
        <style>
            .hidden {
                display:none;
            }.visible {
                display:block;
            }
            .hovering {color:white;background:black;}
            .hovering:hover {color:Black;Background:white;}
        </style>
    </head>

    <body>
        <button id="YourButtonID" onclick="show()" class="hovering">Show welcome DIV</button>
        <div id="HiddenArea" class="hidden">
            <p>This is the hidden area that will be appearing onclick above and close if you click iy again.</p>
        </div>

        <!-- This is where it begins to be tricky -->

        <script>

            function onclick() {
                document.getElementById('HiddenArea').setAttribute('class', 'visible');
                document.getElementById('YourButtonID').setAttribute('onclick', 'hide()');
                document.getElementById('YourButtonID').innerHTML == 'Hide';
            }
            function hide() {
                document.getElementById('HiddenArea').setAttribute('class', 'hidden');
                document.getElementById('YourButtonID').setAttribute('onclick', 'show()');
                document.getElementById('YourButtonID').innerHTML == 'Show';
            }


        </script>

    </body>
</html>

?

, hide(), DIV apposite

+1

  • p .

    <button onclick="openUp()" id="welcome">Click to Begin</button>

  • . -, - - . , - . .
    js,

    document.getElementById("welcome").className = "pointer-clicks";

  • CSS,

    .pointer-clicks{
  pointer-events: auto;
}

References:
https://css-tricks.com/almanac/properties/p/pointer-events/
https://davidwalsh.name/pointer-events

0
source

Source: https://habr.com/ru/post/1623527/

More articles:


All Articles