悬停时不会发生CSS文字缩放

时间：2018-09-07 23:28:06

标签： html css

我有一个带有导航栏的网站。目前，导航文本（理论上，更多）在悬停时变粗了，但是我一直在尝试使文本在悬停时平稳过渡/缩放。但此刻文本似乎只是粗体，我无法使文本按比例放大

有人可以查看我的代码并记录我的错误

 <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="Developer" content="Alejandro Muratalla / ElitePower">
    <title>Power Training | Home</title>

    <style>
                 body{
            font: 15px/1.5 Ariel, Helvetica, sans-serif;
            padding: 0;
            margin: 0;  
            background-color: #f4f4f4;
          }

    /*Global Settings*/

      .container{
         width: 80%;        
         margin: auto;
         overflow: hidden;
             }

        nav{
                float: right;
            margin-top: 10px;
           }

    /* Header */

    header{
        background: #0D98BA;
        color: #FFD700;
        padding-top: 30px;
        min-height: 70px;
        border-bottom: #FF4500 3px solid;
        }

         #a{
         color: #ffffff;
         text-decoration: none;
         text-transform: uppercase;
         font-size: 16px;
         transition: all .1s ease-in-out

        }

    header ul{
               margin: 0;
           padding: 0;
          }

    header li{
          float: left;
          display: inline;
          padding: 0 20px 0 20px;
        }


    header #branding{
              float: left;
            }

    header #branding h1{
                 margin: 0;
               }

    header .highlight, header .current a{
                        color: #000000;
                        font-weight: bold;

                        }

    #a:hover{
              font-weight: bold;
          transform: scale(1.5);

        }

        /* Showcase */

#showcase{
      min-height: 400px;    


    }   

    </style>

</head>    
<body>
    <header>
     <div class="container">
      <div id="branding">
           <h1>Power Clan <span class="highlight">Training</span></h1>  
      </div>
      <nav>
       <ul>
        <li><a href="index.html" id="a"><span class="highlight">Home</span></a></li>
        <li><a href="theory.html" id="a">Theory</a></li>
        <li><a href="more.html" id="a">More</a></li>
       </ul>
      </nav>
     </div>
    </header>

<section id="showcase">
    <div class="container">
<div class="images" style="max-width:500px">
  <img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">

     <h1>Learn Professional Stratagies With Us</h1>
     <p>rggr  hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
    </div>
</section id="newslater">
    <div class="container">
    <h1>Subscribe To Our Channel</h1>
    <form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
    </form>

<section id="boxes">
    <div class="container">

     <div class="box">
    <img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
    <h3>Learn Theory</h3>
     <p></p>
     </div>

    <div class="box">
    <img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
    <h3>Explore Team Plays</h3>
     <p></p>
     </div>

    <div class="box">
    <img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
    <h3>Tips and Tricks Videos</h3>
     <p></p>
     </div>

    </div>
</section>
    <footer>
     <p>&copy; Power Clan Super Rocketball , ElitePower 2018</p>
    </footer>

1 个答案:

答案 0 :(得分：1)

var employeeData = [ [ ['firstName', 'Bob'], ['lastName', 'Lob'], ['age', 22], ['role', 'salesperson'] ], [ ['firstName', 'Mary'], ['lastName', 'Joe'], ['age', 32], ['role', 'director'] ] ] var d = employeeData.map( x=>x.reduce((a,b)=>{a[b[0]]=b[1];return a;},{}) ) console.log(d) 的默认显示为<a>。除非将显示重置为允许调整大小的值，否则无法应用转换。 （或格式化上下文）。您可以将其重置为inline。

inline-block
body {
  font: 15px/1.5 Ariel, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}

/*Global Settings*/

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

nav {
  float: right;
  margin-top: 10px;
}

/* Header */

header {
  background: #0d98ba;
  color: #ffd700;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #ff4500 3px solid;
}

.a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  transition: all 0.1s ease-in-out;
  display:inline-block;
}

header ul {
  margin: 0;
  padding: 0;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header .highlight,
header .current a {
  color: #000000;
  font-weight: bold;
  display: inline-block;
}
.a:hover {
  font-weight: bold;
  transform: scale(1.5);
}

/* Showcase */

#showcase {
  min-height: 400px;
}

注意：我将三个<header> <div class="container"> <div id="branding"> <h1>Power Clan <span class="highlight">Training</span></h1> </div> <nav> <ul> <li><a href="index.html" class="a"><span class="highlight">Home</span></a></li> <li><a href="theory.html" class="a">Theory</a></li> <li><a href="more.html" class="a">More</a></li> </ul> </nav> </div> </header> <section id="showcase"> <div class="container"> <div class="images" style="max-width:500px"> <img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%"> <h1>Learn Professional Stratagies With Us</h1> <p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p> </div> </section id="newslater"> <div class="container"> <h1>Subscribe To Our Channel</h1> <form action="https://www.youtube.com"> <button id="subscribe">Subscribe</button> </form> <section id="boxes"> <div class="container"> <div class="box"> <img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png "> <h3>Learn Theory</h3> <p></p> </div> <div class="box"> <img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png "> <h3>Explore Team Plays</h3> <p></p> </div> <div class="box"> <img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png "> <h3>Tips and Tricks Videos</h3> <p></p> </div> </div> </section> <footer> <p>&copy; Power Clan Super Rocketball , ElitePower 2018</p> </footer>变成了id="a"

相关问题
最新问题