Link color/size 在 Weebly (CSS/HTML)

Question

所以我正在尝试在 weebly 上制作一个小图像菜单。目标很简单。有几张图片，当您将鼠标悬停在它们上方时，背景会变淡并且标题背景会改变颜色。我已经设法正确地完成了那部分（我认为），但现在让我感到沮丧的最后一部分是让 link 的文本更改大小和颜色。

这是我在页面中输入的代码 header:

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

我只是想让图像顶部的 "FAQ" 变成黑色背景的白色，将鼠标悬停在它上面后变成白色背景的黑色。我不太了解 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; 添加到 figure.default:hover figcaption.

来设置悬停处于活动状态时的颜色

最后，要使尺寸正常工作，请将 font-size: 150% 添加到处理悬停的 class，figure.default:hover figcaption。要在悬停时对背景应用透明度，在相同的 CSS class 中将 background-color: 的值从 white 更改为 rgba(255, 255, 255, 0.7)，将 0.7 值更改为你想要的透明度（0 = 完全透明，1 = 不透明）。

Link color/size 在 Weebly (CSS/HTML)

Link color/size in Weebly (CSS/HTML)

html

css

jquery

weebly