0

所以我想在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，所以如果我能得到一些指针，那就太好了。在发布之前我环顾四周，所以我真的很感激一些帮助！谢谢！

4

1 回答 1

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%到处理悬停的类中，figure.default:hover figcaption. 要在悬停时将透明度应用于背景，请在同一个 CSS 类中将值background-color:from更改white为rgba(255, 255, 255, 0.7)，更改 0.7 值以获得所需的透明度（0 = 完全透明，1 = 不透明）。

于 2015-08-21T01:43:19.483 回答