我将#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 projectsMy personal websitejerrell.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 projectsMy personal websitepodep.html" style="text-decoration: none; color: #66ffff;">Positively Dependent</a></p>
<p id="low1"><a href="D:Coding projectsMy personal websitepodep.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 projectsMy personal websitetramx.html" style="text-decoration: none; color: #66ffff;">Trail Mix</a></p>
<p id="low2"><a href="D:Coding projectsMy personal websitetramx.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";
}
我真的不知道如何回答这个问题,但首先,你需要设置一个根目录。根目录可以用XAMPP、WAMP、MAMP甚至NANP创建。我更喜欢XAMPP。所有这些程序都是一个本地网站(用于测试或娱乐)。同样,在像<a href=" <!-- HERE Spaces . . . . . --> ">
这样的链接中增加空格也是不明智的。只是不要那样做。不要使用间隔使用%20
,这是更好的方法
至于你的问题,我想我知道解决它的方法,可能发生这种情况的原因是你实际上从未将脚本设置为openUp()
。因此,如果您创建一个实际的JS函数,它可能对您更有效。如果你不知道如何制作一个函数,那就看看我在这篇文章底部的脚本吧
现在让我们进入这个按钮的CSS,我相信这就是。当一个人点击欢迎按钮时,会出现一个DIV,好吧,你需要在CSS
中有两个新的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>
那么这到底是干什么的呢?
这个脚本加载了一个函数,所以当点击按钮时,它会将Attribute更改为hide()
,还会显示一个隐藏的DIV并指定
首先,您需要定位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,我不知道你想让它们看起来怎么样):
https://jsfiddle.net/h2wchead/1/
-
从按钮标签中移除
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