如何阻止我的<button>代码禁用my：hover？</button>

Question

I wrapped my #welcome within a button, so it would produce an effect when clicked. 我将#welcome包裹在一个按钮内，因此点击时会产生效果。 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): HTML后跟CSS，然后是JavaScript（这三个都在单独的文件中）：

<!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";
}

Answer 1

Firstly, you need to position your button element instead of p contained in it. 首先，您需要定位button元素而不是p包含在其中。 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. 因此，您为.welcome button元素创建css规则，并将所有定位规则从p移动到它。

Then you change :hover rule to .welcome button . 然后你改变:hover规则到.welcome button 。

And finally, in javascript function, you need to change: 最后，在javascript函数中，您需要更改：

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): 这是一个演示（你仍然需要定位那些较低的div，我不知道你希望它们看起来如何）：

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

Answer 2

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. 根目录可以使用XAMPP或WAMP或MAMP甚至NANP制作。 I prefer XAMPP. 我更喜欢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="  "> . 另外，在<a href="  ">这样的链接中显示空间并不明智。 Just don't do that. 只是不要这样做。 Instead of using spaced use %20 , thats a way more better! 而不是使用间隔使用%20 ，这是一种更好的方式！

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() . 对于你的问题，我想我知道解决它的方法，这可能发生的原因是你实际上从未将脚本设置为openUp() 。 So if you create a actual JS Function, it might work better for you. 因此，如果您创建一个实际的JS函数，它可能会更适合您。 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. 现在让我们进入你的这个按钮的CSS，所以我相信这是。 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: 当一个人点击欢迎按钮，然后会出现一个DIV，好的，你需要在CSS 2个新的CLASSES ，所以现在看一下这个脚本，以了解你如何为此做出正确的样式：

<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 这个脚本加载一个函数，所以当单击该按钮时，它会将Attribute更改为hide()它也会显示一个隐藏的DIV和apposite

Answer 3

Remove the p tag from the button tag. 从按钮标签中删除p标签。
```
 <button onclick="openUp()" id="welcome">Click to Begin</button> 
```
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, 修改js中的行，
```
 document.getElementById("welcome").className = "pointer-clicks"; 
```

Then add the CSS, 然后添加CSS，

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

References: 参考文献：
https://css-tricks.com/almanac/properties/p/pointer-events/ https://css-tricks.com/almanac/properties/p/pointer-events/
https://davidwalsh.name/pointer-events https://davidwalsh.name/pointer-events

如何阻止我的<button>代码禁用my：hover？</button>

问题描述

3 个解决方案

解决方案1
1 2016-01-09 10:54:30

解决方案2
1

解决方案3
0 2016-01-09 11:24:57

如何阻止我的<button>代码禁用my：hover？</button>

问题描述

3 个解决方案

解决方案1 1 2016-01-09 10:54:30

解决方案2 1

解决方案3 0 2016-01-09 11:24:57

解决方案1
1 2016-01-09 10:54:30

解决方案2
1

解决方案3
0 2016-01-09 11:24:57