4
Я завернул свой #welcome в течение одной кнопки, так что это произвело бы эффект при нажатии. Кажется, что кнопка ничего не делает, и начальная функциональность (: hover) моего элемента по какой-то причине была отключена. Как мне это сделать?Как запретить мой тег <button> отключить мой: hover?
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";
}