:在锚点上悬停过渡

Posted 2023-05-08

【中文标题】:在锚点上悬停过渡

【英文标题】：:Hover transition on an anchor

【发布时间】：2019-04-16 06:51:02

【问题描述】：

我在这里摸不着头脑：我有几个 div 在悬停时转换，但我试图在锚链接上重新创建相同的，但我无法让它适合。一辈子都找不到原因！

编辑：所以我忘了描述我的问题，哎呀！ 基本上，两个黄色按钮是我可以做的：一个转换，但是只有文本而不是黄色区域可以作为链接点击。另一个黄色按钮是完全可点击的，所以完成按钮是一个链接，但它不会转换。我想在这些黄色按钮上进行转换，以匹配“项目图块”缩略图的转换。

到目前为止，这是我的代码（抱歉，如果格式没有通过 - 第一篇！）：

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

提前感谢任何可以为我指明正确方向的人:)

【参考方案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" >
      <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" >
      <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" >
      <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" >
      <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" >
      <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" >
      <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>

【讨论】：

哦，实际上，我不是很清楚哪里有问题，抱歉！问题是页面底部的黄色按钮，上面写着“更多项目”。我已经制作了两个来显示我可以制作的两个选项，并且我希望按钮以与将鼠标悬停在缩略图/项目图块上时相同的方式进行转换。问题是，如果我将代码放在锚链接中，我只能进行转换，但是黄色区域不可点击，只有锚文本。

啊，在这种情况下你的锚标签#pro-link-text（第二个当前没有移动的按钮，你需要添加display: inline-block;和一个初始变换比例状态，例如transform:scale(1)；比例转换不设置显示属性将无法工作。

太棒了，非常感谢！我永远不会发现 :) 因此，如果不设置显示，比例转换将无法工作，但是我的“项目瓷砖”没有显示集，尽管它可以工作 - 它是否在 flex 中起作用容器或不同的东西？再次感谢:)

因为它是一个a 标签，所以它的默认显示是inline，因此它会忽略任何转换，因为您的项目图块位于div 中，因此默认显示为block 元素。很高兴它对你有用！

太棒了，这真的很清楚:) 非常感谢！ :)