为什么悬停在标题上没有显示？

时间：2017-07-06 11:31:52

标签： html css

悬停我已添加到标题中，但未显示。 我试图仅将悬停添加到.div类，稍后再添加悬停到#titulo id上。 这是我尝试复制练习Layout的布局。

P.D抱歉我的英文。

＆＃13;
＆＃13; 
@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
 ****************************/
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

颜色未显示，因为它被覆盖：

#titulo a {
    color: black;
    text-decoration: none;
}

我将下面的代码段添加到了css的底部，因为它位于底部会覆盖以前的css规则。

#titulo:hover a {
  color: #B9384E;
}


@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);
}

.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
 ****************************/

#titulo:hover a {
  color: #B9384E;
}
<!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>

相关问题
最新问题