在Weebly中链接颜色/大小（CSS / HTML）

Question

因此，我尝试在weebly上制作一个小的图像菜单。 目标很简单。 有几张图像，当您将鼠标悬停在它们上面时，背景会褪色，字幕背景会更改颜色。 我已经设法正确地完成了该部分（我认为），但是现在杀了我的最后一部分是获取链接文本，以更改大小和颜色。

这是我放在页面标题中的代码：

<style>


figure.figurefx{
 margin: 0;
 padding: 0;
 display: inline-block;
 position: relative;
 overflow: hidden; /* hide overflowing elements by default */
}

figure.figurefx::before, figure.figurefx::after{ /* create :before and :after pseudo elements that are initially positioned outside canvas */
 content: '';
 width: 100%;
 height: 100%;
 display: block;
 background: black;
 position: absolute;
 opacity: 0;
 top: 0;
 left 0;
 -moz-transform: translate3d(0, 0, 0); /* position elements past bottom of layout */
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 -moz-transition: all 0.5s;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}

figure.figurefx img{
 display: block;
}

figure.figurefx figcaption{
 position: absolute;
 font-family: 'Oxygen', sans-serif;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 150%
 display: block;
 color: black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: width: 100px; 
 text-align: center;
 background: black;
 padding: 5px;
 z-index: 100;
 width: 100%;
 max-height: 100%;
 overflow: hidden;
 top: 50%;
 left: 0;
 -moz-transform: translate3d(0, -50%, 0); /* position caption outside layout horizontally and centered vertically */
 -webkit-transform: translate3d(0, -50%, 0);
 transform: translate3d(0, -50%, 0);
 -moz-transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 transition: all 0.5s;

}
figure.figurefx figcaption a{
 text-decoration: none;
 text-decoration: color: black;
}


/*** Default slide down panel effect ****/
figure.figurefx:hover:after{
 opacity: 0.6;
}
figure.default:hover::before{
 -moz-transform: translate3d(0, 0, 0);
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

figure.default:hover figcaption{
 opacity: 1;
 -moz-transform: translate3d(0, -50%, 0); /* center caption */
 -webkit-transform: translate3d(0, -50%, 0);
 transform: translate3d(0, -50%, 0);
 background: white;
 /*-moz-transition: all 0.5s;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
 -moz-transition-delay: 0.5s;
 -webkit-transition-delay: 0.5s;
 transition-delay: 0.5s; */
}


</style>

<!--[if lte IE 9]>

 <style>
 /* IE9 and below specific CSS */

 figure.figurefx::before, figure.figurefx::after{
  display: none; /* hide pseudo elements, since legacy IE can't transition them */
 }

 </style>

<![endif]-->
</style>

现在，网站上HTML元素的嵌入代码是这样的：

<figure class="figurefx default">
     <a href="http://www.mywebsite.com/faq.html">
        <img src="http://www.mywebsite.com/files/theme/FAQ.jpg" width="225" height="90" />
         <figcaption>
          F.A.Q 
        </a>
 </figcaption>
</figure>

我只想将图像上方的“常见问题解答”设置为带有黑色背景的白色，以及将鼠标悬停在其上方后带有白色背景的黑色。 我不太了解CSS或HTML，所以如果我能得到一些指针，那将是很好的。 发布之前，我到处逛逛了很多，因此，我非常感谢您的帮助！ 谢谢！

Answer 1

评论摘要以及最终解决方案：

首先 ，HTML标签未正确嵌套：

<a><figcaption></a></figcaption>

应该首先关闭最近打开的标签，如下所示：

<a><figcaption></figcaption></a>

其次 ，以下CSS无效：

text-decoration: color: black;

删除text-decoration:位，您会很出色：

color: black;

第三 ， background: black; 确实可以，但是由于您只设置颜色，因此最好使用background-color:

background-color: black;

现在 ，要使颜色正确更改，您必须设置默认颜色（在没有悬停时），方法是添加color: white; 设置为figure.figurefx figcaption ，然后在悬停活动时通过添加color: black;来设置color: black; 要figure.default:hover figcaption 。

最后 ，要使font-size: 150%调整figure.default:hover figcaption ，请在处理悬停的类figure.default:hover figcaption添加font-size: 150% 。 要将透明度应用于悬停时的背景，请在同一CSS类中将background-color:的值更改为background-color:从white更改为rgba(255, 255, 255, 0.7) ，将0.7更改为所需的透明度（0 =完全透明，1 =不透明）。