我将#welcome包裹在一个按钮内，因此点击时会产生效果。该按钮似乎什么都不做，并且由于某种原因，我的元素的初始功能（：悬停）已被禁用。我该如何还原呢？
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";
}
答案 0 :(得分：1)
首先，您需要定位button元素而不是其中包含的p。现在你把它放在左上方。因此，您为.welcome button元素创建了css规则，并将所有定位规则从p移至它。
然后，您将:hover规则更改为.welcome button。
最后，在javascript函数中，您需要更改：
document.getElementById("welcome").style.pointer-events = "auto";
到：
document.getElementById("welcome").style.pointerEvents = "auto";
或者：
document.getElementById("welcome").style.setProperty("pointer-events","auto");
否则该连字符将被视为减号。
这是一个演示（你仍然需要定位那些较低的div，我不知道你希望它们看起来如何）：
答案 1 :(得分：1)
我真的不知道如何回答这个问题，但首先，您需要设置一个根目录。根目录可以使用XAMPP或WAMP或MAMP甚至NANP制作。我更喜欢XAMPP。所有这些程序都是本地网站（用于测试或娱乐）。在"*begin*"这样的链接中调出空格也不明智。只是不要这样做。而不是使用间隔使用<a href=" <!-- HERE Spaces . . . . . --> ">，这更好一点了！
对于你的问题，我想我知道解决它的方法，这可能发生的原因是你实际上从未将脚本设置为%20。因此，如果您创建一个实际的JS函数，它可能会更适合您。如果你不知道如何创建一个函数，那么只需看看我在这篇文章最底部的脚本。
现在让我们进入你的CSS按钮，所以我相信这是。当一个人点击欢迎按钮，然后会出现一个DIV，好的，你需要openUp()中的2个CLASSES，所以现在看一下这个脚本，以了解你如何制作正确的样式为此：
CSS那究竟是做什么的？
此脚本加载一个函数，因此当单击该按钮时，它会将属性更改为<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>
，它也会显示隐藏的DIV和适当的
答案 2 :(得分：0)
从按钮标记中删除p标记。
<button onclick="openUp()" id="welcome">Click to Begin</button>
我无法添加评论。指针事件似乎与事件侦听器的工作方式不同。希望别人能澄清一下。这对我有用。
修改js中的行，
document.getElementById("welcome").className = "pointer-clicks";
然后添加CSS，
.pointer-clicks{
pointer-events: auto;
}
参考文献：
https://css-tricks.com/almanac/properties/p/pointer-events/
https://davidwalsh.name/pointer-events