私はここでどこが間違っているのか-JAVASCRIPT

debugcn 投稿 Dev

トマイシンルア

私は最近、ちょっとしたオンラインコーディングチャレンジに参加しました。私は完全な初心者なので、以下のコードを使用して、この問題に関する少しのガイダンスをいただければ幸いです。

基本的に、HTMLで終わるスクリプトは、マウスを置いて再び離れると、タイトルとフッターの色を変更することになっていますが、何らかの理由でこれはタイトルでのみ機能し、フッターでは機能しません。

私はトラブルシューティングが大好きで、数時間検索すると一般的に必要な答えが得られることがわかりましたが、ここでエラーを理解することはできません。

これについて正しい方向に私を向けることができたどんな種類のコーダーにも永遠に感謝します。

よろしくお願いします

トミー・ウォルシュ

更新：私はこの質問をする前に十分に調査しなかったように見えるかもしれないことを理解していますが、私はコードを調べるのに何時間も費やしたと信じています。getElementByIdを初めて使用しましたが、それでも、非常に卑劣なもので時間を無駄にする可能性があるという言い訳はありません。

今後、質問する前にさらに調査していきます。

すべての回答者に感謝します

header, aside, article, footer{
	color: black;
	float:left;
	padding-left: 15px;
	padding-right: 15px;
}


#container {
	font-family: helvetica;
	background-color: #ffffff;
	width: 960px;
	height: 500px;
	margin: 0 auto;

}

header {
	background-color: green;
	width: calc(100% - 30px);
}

aside {
 	background-color: yellow;
 	clear:left;
 	width: calc(20% - 30px);
 
}

article {
	background-color:blue;
	width: calc(80% - 30px);
	height: 400px;
}

footer{
	background-color:red;
	width: 100%;
	width: calc(100% - 30px);
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Day 5 JavaScript</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
		<div id="container"> 
			<header id="title">
				<h1>My Page Title</h1>
			</header>
			<aside>
				<p>Migas shabby chic bitters keytar occupy kinfolk. Pug gochujang heirloom cornhole sustainable single-origin coffee crucifix organic fashion axe, tumeric   polaroid trust fund vegan tattooed.
				</p>
			</aside>
			<article>
				<h2>My Article Header</h2>
				<p> Pop-up fashion axe iPhone, tumblr put a bird on it lumberjack sartorial. Keytar coloring book plaid, marfa unicorn gluten-free affogato gastropub synth. Quinoa before they sold out sustainable, kinfolk bicycle rights XOXO yuccie craft beer cred asymmetrical hell of synth. Portland messenger bag aesthetic, kinfolk kogi try-hard cardigan. Raclette venmo forage disrupt cred bitters. Mustache sustainable XOXO, williamsburg meditation wayfarers distillery thundercats unicorn truffaut occupy twee four dollar toast irony. Green juice tumeric la croix thundercats scenester af
				</p>
			</article>
			<footer>
				<p> Footer content in here</p>
			</footer>
		</div>
		<script> document.getElementById('title').onmouseenter = function() { this.style.backgroundColor = 'purple'; }; document.getElementById('title').onmouseleave = function() { this.style.backgroundColor = 'green'; }; </script>
		
		<script> document.getElementById('footer').onmouseenter = function() { this.style.backgroundColor = 'purple'; }; document.getElementById('footer').onmouseleave = function() { this.style.backgroundColor = 'green'; }; </script>
	</body>
</html>

クリストファーメッサー

これfooterは、HTMLにのIDがないためです。に変更<footer>する<footer id="footer">と、問題は解決します。

また、-のcss疑似クラスを調べる必要があります:hover-これにより、これがはるかに簡単になります！

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]