3个链接在悬停时设置动画，但1个不设置

时间：2018-07-25 22:04:36

标签： html css css3 css-transforms

<b><a class="external" href="http://tuleburgpress.com/">Tuleburg Press</a></b>链接没有在悬停时设置动画。所有其他链接会在悬停时进行动画处理。无效的链接在页面上是换行符，为什么？有什么想法吗？

a.external {
  position: relative;
  text-decoration: none;
	text-transform: uppercase;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0.04rem;
	line-height: 3rem;
	font-family: 'Roboto Mono', monospace;
	color: #ff9f43;
}

a.external:before {
  content: "";
  position: absolute;
  background-color: #ff9f43;
  width: 100%;
  height: 3px;
  bottom: -2px;
  left: 0;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a.external:hover:before {
 visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  color: #ff9f43;
  background-color: #ff9f43;
}
<h2>Brought to you by <b><a class="external" href="http://placeholdermag.com/">Placeholder Magazine</b></a>, the <b><a class="external" href="http://www.arts.ca.gov/">California Arts Council</a></b> and the <b><a class="external" href="http://www.stocktonca.gov/government/boardCom/sArts.html">Stockton Arts Commission</a></b>, <b><a class="external" href="http://tuleburgpress.com/">Tuleburg Press</a></b>, and are proud to announce Stockton's first Zine making workshop series for kids.</h2>

5 个答案:

答案 0 :(得分：1)

这是因为行被包裹和折断了。

添加<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="container-fluid"> <div class="row"> <div class="col">a</div> <div class="col">b</div> </div> </div>以确保它在同一行上。不要使用display: inline-block标记，而应将<b>或<strong>与<span>一起使用。

font-weight: bold
a.external {
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  line-height: 3rem;
  font-family: 'Roboto Mono', monospace;
  color: #ff9f43;
  display: inline-block;
}

a.external:before {
  content: "";
  position: absolute;
  background-color: #ff9f43;
  width: 100%;
  height: 3px;
  bottom: -2px;
  left: 0;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a.external:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  color: #ff9f43;
  background-color: #ff9f43;
}

答案 1 :(得分：1)

由于换行，动画没有发生。不仅如此，您还错误地关闭了第一组标签。如果您仔细看一下代码的第一个链接，就会更加清楚：

Brought to you by
<b>
  <a class="external" href="http://placeholdermag.com/">
    Placeholder Magazine
  </b>
</a>

您正在执行<b><a></b></a>而不是<b><a></a></b>。 ou最后打开a标签时，您需要先关闭它，然后才关闭封装的b标签。

答案 2 :(得分：0)

不建议使用第一个<b>，如果您使用的是font-weight:700，也不需要strong，请删除它（因为这个原因，您不正确地关闭了标签）< / p>

问题在于a是内联元素，因此您需要将a设置为块级元素，例如使用inline-block 

a.external {
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  line-height: 2.5rem;
  font-family: 'Roboto Mono', monospace;
  color: #ff9f43;
  display: inline-block
}

a.external:before {
  content: "";
  position: absolute;
  background-color: #ff9f43;
  width: 100%;
  height: 3px;
  bottom: -2px;
  left: 0;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a.external:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  color: #ff9f43;
  background-color: #ff9f43;
}
<h2>Brought to you by <a class="external" href="http://placeholdermag.com/">Placeholder Magazine</a>, the <a class="external" href="http://www.arts.ca.gov/">California Arts Council</a> and the <a class="external" href="http://www.stocktonca.gov/government/boardCom/sArts.html">Stockton Arts Commission</a>,
  <a class="external" href="http://tuleburgpress.com/">Tuleburg Press</a>, and are proud to announce Stockton's first Zine making workshop series for kids.</h2>

答案 3 :(得分：0)

如果要保持元素内联，这里是另一种选择：

a.external {
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  line-height: 3rem;
  font-family: 'Roboto Mono', monospace;
  color: #ff9f43;
  background:linear-gradient(#ff9f43,#ff9f43) bottom/0% 3px no-repeat;
  transition:all 0.3s ease-in-out;
}
a.external:hover {
  background-size:100% 3px; 
}
<h2>Brought to you by <a class="external" href="http://placeholdermag.com/">Placeholder Magazine</a>, the <a class="external" href="http://www.arts.ca.gov/">California Arts Council</a> and the <a class="external" href="http://www.stocktonca.gov/government/boardCom/sArts.html">Stockton Arts Commission</a>,
  <a class="external" href="http://tuleburgpress.com/">Tuleburg Press</a>, and are proud to announce Stockton's first Zine making workshop series for kids.</h2>

答案 4 :(得分：-1)

我认为您的第一个链接标签和粗体（强）标签的顺序未按正确的顺序打开和关闭。试试：

<h2>Brought to you by <b><a class="external" href="http://placeholdermag.com/">Placeholder Magazine</a></b>, the <b><a class="external" href="http://www.arts.ca.gov/">California Arts Council</a></b> and the <b><a class="external" href="http://www.stocktonca.gov/government/boardCom/sArts.html">Stockton Arts Commission</a></b>, <b><a class="external" href="http://tuleburgpress.com/">Tuleburg Press</a></b>, and are proud to announce Stockton's first Zine making workshop series for kids.</h2>
相关问题
最新问题