: 锚点上的悬停过渡

Question

我在这里抓耳挠腮：我有几个 div 在悬停时会转换，但我试图在锚点上重新创建相同的 div link 但我无法将其转到合身。我这辈子都找不到原因了！

编辑： 所以我忘了描述我的问题，哎呀！基本上，这两个黄色按钮是我可以做的：一个转换，但是只有文本而不是黄色区域可以作为 link 单击。另一个黄色按钮是完全可点击的，因此完整按钮是 link，但它不会转换。我想在这些黄色按钮上进行转换以匹配 "project-tile" 缩略图。

到目前为止，这是我的代码（抱歉，如果格式不正确 - 首先 post！）：

/* This anchor's button isn't fully clickable */

.prolink {
  background: yellow;
  width: 100px;
  padding: 10px 20px;
  margin: 30px auto;
  border: 2px solid black;
  border-radius: 25px;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
  transition: transform 350ms;
}

.prolink:hover {
  background: var(--hoveryellow);
  color: var(--deepblue);
  transform: scale(1.08);
}


/* This anchor won't transition */

#pro-link-text {
  background: yellow;
  width: 100px;
  padding: 10px 20px;
  margin: 30px auto;
  border: 2px solid black;
  border-radius: 25px;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
  transition: transform 350ms;
}

#pro-link-text:hover {
  background: var(--hoveryellow);
  color: var(--deepblue);
  transform: scale(1.08);
}

<!-- This transition works -->
<!-- But the surrounding area on this anchor button isn't fully clickable -->
<div class="prolink">
  <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
</div>
<!-- But this anchor won't transition -->
<a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>

我发誓，它在 CodePen 中的格式正确，哈哈:

https://codepen.io/fitfingers/pen/mQEPry?editors=1100

提前感谢任何能给我指出正确方向的人:)

Answer 1

更新了我的回答，使其与您的问题更相关。正如我在下面的评论中提到的，您需要设置 display 属性和初始 transform 状态。

* {
  font-family: "Poor Story", sans-serif;
}

:root {
  --deepblue: #38b0bd;
  --hoveryellow: #fffe68;
  --babyblue: #D6F5F5;
}

body {
  margin: 0;
  box-sizing: border-box;
  background: var(--babyblue);
}

p {
  font-size: 18px;
}

 /* Navigation bar */
#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: var(--deepblue);
  display: flex;
  flex-direction: row-reverse;
  z-index: 3;
}

#navbar a {
  padding: 32px;
  text-decoration: none;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

#navbar a:hover {
  background: var(--hoveryellow);
  color: #444;
}

#navbar-shadow {
  position: fixed;
  top: 57px;
  height: 32px;
  width: 100%;
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.25);
  z-index: 1;
}

/* Welcome screen */
#welcome-section {
  background: var(--deepblue);
  text-align: center;
  position: absolute;
  width: 100%;
  color: white;
  height: 60vh;
  top: 0;
  padding-top: 40vh;
  z-index: 2;
}

/* Projects: flexbox design */
#projects {
  margin-top: 100vh;
  padding: 40px 30px;
  text-align: center;
}

#projectbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.project-tile {
  flex-basis: 300px;
  height: 250px;
  margin: 40px 70px;
  background: black;
  text-align: center;
  box-shadow: 0 0 12px 3px rgba(0,0,0,0.2);
  border-radius: 5px;
  transition: transform 350ms;
}

.project-tile:hover {
  transform: scale(1.08);
}

.project-tile img {
  width: 298px;
  border-radius: 5px;
  border: 2px solid black;
}

.tile-text {
  background: var(--deepblue);
  padding: 17px;
  border-radius: 5px;
  margin-top: -7px;
  font-size: 22px;
  border: 2px solid black;
}

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

/* This anchor's button isn't fully clickable */
.prolink {
  background: yellow;
  width: 100px;
  padding: 10px 20px;
  margin: 30px auto;
  border: 2px solid black;
  border-radius: 25px;
  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
  transition: transform 350ms;
}

.prolink:hover {
  background: var(--hoveryellow);
  color: var(--deepblue);
  transform: scale(1.08);
}

/* This anchor won't transition */
#pro-link-text {
  background: yellow;
  width: 100px;
  padding: 10px 20px;
  margin: 30px auto;
  border: 2px solid black;
  border-radius: 25px;
  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
  transition: transform 350ms;
  transform:scale(1);
  display:inline-block;
}

#pro-link-text:hover {
  background: var(--hoveryellow);
  color: var(--deepblue);
  transform: scale(1.08);
}

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet" type="text/css">

<!-- Code begins here -->

<!-- Navigation bar -->
<nav id="navbar">
  <a class="navlink" href="#contact">Contact</a>
  <a class="navlink" href="#projects">Projects</a>
  <a class="navlink" href="#welcome-section">Home</a>
</nav>

<div id="navbar-shadow">
</div>

<!-- Welcome landing section -->
<div id="welcome-section" autofocus>
  <h1>Hi, I'm James Hooper.</h1>
  <p>...and I'm your next Frontend Developer :)</p>
</div>

<!-- Projects -->
<div id="projects">
  <h2>Some projects of mine:</h2>
  <div id="projectbox">
    <a href="https://codepen.io/fitfingers/full/MzyeOY/" target="_blank" class="project-tile">
      <img src="http://i63.tinypic.com/2ivh1m1.png" alt="Screenshot of TWIG landing page.">
      <div class="tile-text">TWIG Landing Page</div>
    </a>
    <a href="https://codepen.io/fitfingers/full/eQzOKQ/" target="_blank" class="project-tile">
      <img src="http://i64.tinypic.com/2nhjd4w.png" alt="Screenshot of technical documentation page.">
      <div class="tile-text">Technical Documentation Page</div>
    </a>
    <a href="https://codepen.io/fitfingers/full/YRwyev/" target="_blank" class="project-tile">
      <img src="http://i63.tinypic.com/2624p3o.png" alt="Screenshot of Dr. Borlaug tribute page.">
      <div class="tile-text">Tribute Page</div>
    </a>
    <a href="https://codepen.io/fitfingers/full/QJyKap/" target="_blank" class="project-tile">
      <img src="http://i65.tinypic.com/1o7vid.png" alt="Screenshot of survey form.">
      <div class="tile-text">Survey Form</div>
    </a>
    <a href="https://codepen.io/fitfingers/full/JeGjdW/" target="_blank" class="project-tile">
      <img src="http://i67.tinypic.com/21cy2qr.png" alt="Screenshot of responsive web layout.">
      <div class="tile-text">Responsive Web Layout</div>
    </a>
    <a href="https://codepen.io/fitfingers/full/mQEPry/" target="_blank" class="project-tile">
      <img src="http://i68.tinypic.com/n2l7dh.png" alt="Screenshot of this page #META.">
      <div class="tile-text">Current Project #meta</div>
    </a>
  </div>
  <!-- This anchor button isn't fully clickable -->
  <div class="prolink">
    <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
  </div>
  <!-- But this anchor won't transition -->
    <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>
</div>

<div id="contact">
  
</div>

: 锚点上的悬停过渡

:Hover transition on an anchor

html

css

anchor

transition

hover