在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 =不透明）。