0
我添加到標題中的懸停未顯示。 我試圖將懸停只添加到.div類，稍後將懸停添加到#titulo ID上。 這是我試圖複製練習Layout的佈局。爲什麼懸停在標題上不顯示？
P.D對不起，我的英語。
@import "normalize.css";
/****************************
GENERAL
****************************/
body {
font-family: sans-serif;
background-color: rgb(246, 245, 241);
max-width: 100%;
width: 800px;
margin: 0 auto;
}
.div a {
color: rgb(185, 56, 78);
}
#titulo:hover {
color: #B9384E;
}
.div a:hover {
background-color: #B9384E;
color: white;
text-decoration: none;
}
/****************************
HEADING
****************************/
header {
font-family: 'Oswald', sans-serif;
}
h1 {
font-weight: bold;
font-size: 3em;
}
h1,
h2 {
padding: 0;
margin: 0.15em;
}
#titulo a {
color: black;
text-decoration: none;
}
h3 {
color: rgb(185, 56, 78);
font-size: 1.5em;
padding-top: 30px;
}
h3,
h4 {
margin: 3px;
}
h2 span {
text-decoration: line-through;
}
/****************************
NAVIGATION
****************************/
.selected {
background-color: rgb(185, 56, 78);
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
nav {
text-align: left;
background-color: black;
color: #fff;
font-size: 1.25em;
border-radius: 5px;
}
nav ul {
list-style: none;
padding-left: 0;
}
nav li {
display: inline-block;
padding: 10px 25px 10px 25px;
}
nav li a {
color: white;
text-decoration: none;
}
nav li:hover {
background-color: rgb(185, 56, 78);
}
/****************************
DIV
****************************/
#primary-content,
#secondary-content,
#info {
background-color: white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
max-height: 100%;
}
#primary-content img {
border: 2px solid rgb(246, 245, 241);
margin: 30px 20px 30px 70px;
}
#primary-content,
#secondary-content,
#pollassociales,
#info {
margin-bottom: 30px;
}
#blogroll {
width: 75%;
float: left;
}
#social {
float: right;
width: 25%;
}
#info {
clear: both;
}
#parrafo {
float: left;
clear: both;
width: 50%;
padding-left: 10px;
}
#primary-content {
padding-left: 10px;
}
#primary-content p {
font-size: 0.9em;
}
/****************************
UNORDERED LIST
****************************/
#columnas {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
padding: 0;
}
#pollassociales h5 {
width: 14.7%;
}
#pollassociales li {
font-size: 0.8em;
width: 85.3%;
padding: 10px 5% 10px 0;
list-style: none;
}
/****************************
FOOTER
****************************/
footer p {
float: right;
}
/****************************
PAGE:HOME
****************************/
/****************************
COLORS
****************************/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet">
</head>
<body id="index" class="home">
<header>
<div id="titulo">
<h1>
<a href="index.html">Smashing HTML5!</a>
</h1>
<h2>
<a href="index.html">HTML5 in the year <span>2022</span> 2009</a>
</h2>
</div>
<nav>
<ul>
<li class="selected"><a href="index.html">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>
<div class="div" id="primary-content">
<div id="parrafo">
<h3>Featured Article</h3>
<h4>HTML5 in Smashing Magazine</h4>
<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="https://www.w3.org/html/wg/drafts/html/master/Overview.html" target="_blank">HTML5</a> and <a href="https://www.w3.org/TR/css3-roadmap/"
target="_blank">CSS3</a> website today!</p>
</div>
<div id="imagen">
<img src="img/sm-logo.gif">
</div>
</div>
<div class="div" id="secondary-content">
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By <a href="index.html">Enrique Ramírez</a></p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="index.html">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By <a href="index.html">Enrique Ramírez</a></p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="index.html">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By <a href="index.html">Enrique Ramírez</a></p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="index.html">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
</div>
<div id="pollassociales" class="div">
<div id="blogroll">
<h5>blogroll</h5>
<ul id="columnas">
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
</ul>
</div>
<div id="social">
<h5>social</h5>
<ul>
<li>delicious</li>
<li>digg</li>
<li>facebook</li>
<li>last.fm</li>
<li>rss</li>
<li>twitter</li>
</ul>
</div>
</div>
<div class="div" id="info">
<h4>Smashing Magazine</h4>
<p>Amazing Magazine</p>
<img src="img/avatar.gif">
<p>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</p>
</div>
<footer class="div">
<p>2005-2009 <a href="https://www.smashingmagazine.com">Smashing Magazine</a>.</p>
</footer>
</body>
</html>
你有什麼想改變懸停？背景顏色或文字顏色？ –