CODEWITHSUNDEEP
javascripthtmlcss
user5684138
user5684138

Reputation: 43

How do I prevent my <button> tag from disabling my :hover?

I wrapped my #welcome within a button, so it would produce an effect when clicked. The button seems to do nothing, and the initial functionality (:hover) of my element has been disabled for some reason. How do I revert this?

HTML followed by CSS followed by 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's 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";
}

Upvotes: 4

Views: 82

Answers (3)

Nirmal
Nirmal

Reputation: 559

  1. Remove the p tag from the button tag.

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

  2. I couldn't add a comment. Pointer-events seems to work differently with event listeners. Hope someone else would clarify. This worked for me.
    Modify the line in js,

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

  3. Then add the CSS,

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

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

Upvotes: 0

n-dru
n-dru

Reputation: 9430

Firstly, you need to position your button element instead of p contained in it. Now you have it on left top. So You create css rule for .welcome button element and move all positioning rules from p to it.

Then you change :hover rule to .welcome button.

And finally, in javascript function, you need to change:

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

to: 

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

or to: 

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

otherwise that hyphen will be treated as minus sign.

Here's a demo (you still need to position those lower divs, I don't know how you want them to look):

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

Upvotes: 1

user5758855
user5758855

Reputation:

I don't really know how to answer this question, but first of all, you need to set a rootdirectory. A root directory can be made with XAMPP or WAMP or MAMP or even NANP. I prefer XAMPP. All those programs is a local website(for testing or for fun). Also its not smart to bring up spaces in a link like this <a href=" <!-- HERE Spaces . . . . . --> ">. Just don't do that. Instead of using spaced use %20, thats a way more better!

And over to your problem, i think i know a way to solve it, the reason this may occure is that you actually never set a script to openUp(). So if you create a actual JS Function, it might work better for you. If you don't know how to make a function, then just take a look at my script at the very bottom of this post.

Now lets get into your CSS of this button, so as i belive this is. When a person click on a welcome button, then a DIV will appear, okay to do so you need 2 new CLASSES in CSS so now look at this script to get to know how you make the correct styling for this:

<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>

So what does this exactly do?

This scripts loads a function, so when the button is clicked it will change Attribute to hide() also it will display an hidden DIV and apposite

Upvotes: 1

Related Questions