背景上的css过渡效果和悬停时的文本

我试图使过渡效果在文本和背景上的框悬停工作，但我的结果到目前为止是两个独立的效果。当我将框悬停时，bg上的转换工作正常，但只有当我将文本本身悬停时，文本才会产生效果。 我想应用颜色变化时，在整个框中悬停不必悬停的文字也。 我需要背景颜色从黑色变为白色，标题从白色变为黑色

我的css是

。时尚流行小部件
{
高度：150像素；
位置：相对位置；
宽度：100%；
}
.时尚流行小工具img
{
高度：150像素；
最大宽度：100%；
}
.时尚流行小部件.元文本
{
背景：rgba（0,0,0,3）；
底部：0；
顶部：65%；/*调整BG开始位置*/
左：0；
右：0；
位置：绝对位置；
文本对齐：左对齐；
左侧填充：10px；
moz跃迁：1s；
ms转换：1s；
o-转变：1s；
过渡：1s；
webkit转换：1s；
}
}
.时尚流行小部件.元文本h3
{
颜色：#FF0000！重要；
}
.时尚流行小部件.元文本h3 a
{
颜色：#fff！重要；
字体大小：25px；
字母间距：1px；
}
.时尚流行小部件.元文本h3 a:悬停
{
文字装饰：无；
颜色：#000！重要；
}
.时尚流行小部件.元文本h3:悬停
{
文字装饰：无；
颜色：#000！重要；
}
.时尚流行小部件.元文本span.date
{
颜色：rgba（59,59,59,1）；
字体大小：11px；
字母间距：1px；
填充顶部：30px；
}
.Style流行小部件：hover>.meta text
{
背景：rgba（255255,8）；
顶部：继承；
排名：0；
}

像这样的？它是控制文本颜色的元文本。
试试这个：

.stylish-popular-widget:hover .meta-text h3 a {
  color: black!important;
}

您不一定需要多个
：悬停
-s来执行此操作。您可以使用继承，具体取决于您的设计：

.stylish-popular-widget .meta-text {
    background: rgba(0,0,0,.3);
    bottom: 0;
    top: 65%; /*adjust BG start position*/
    left: 0;
    right: 0;
    position: absolute;
    text-align: left;
    padding-left: 10px;
    moz-transition: 1s;
    ms-transition: 1s;
    o-transition: 1s;
    transition: 1s;
    webkit-transition: 1s;
    color: #fff;
}

.stylish-popular-widget .meta-text h3 a {
    font-size: 25px;
    letter-spacing: 1px;
    color: inherit;  
}


.stylish-popular-widget:hover > .meta-text {
    background: rgba(255,255,255,.8);       
    top: 0;
    color: black;
}

您可能不需要所有这些
！重要的
声明。
如果您通过jsfiddle或codepen提供一个在线示例，将会更容易。无论如何，您需要将
：hover
更改为位于包装块元素而不是锚定（a）标记上，或者您可以将锚定更改为块元素，方法是将
display:block
添加到锚定中，然后为其指定尺寸。非常感谢您的回答！我是新的编码，我很抱歉我所有的问题和错误。。。你能给我一个实施了一些解决方案的例子吗？我希望这能有所帮助：这只是一个例子，但有很多不同的方法可以做到。谢谢Narxx我解决了这个问题：））是的，我明白了。这是我给您的第一个建议：“您需要将：hover更改为位于包装块元素上，而不是锚点上”。这正是你所做的：-）Heyyyyyyy它的工作！！！！你能解释一下是什么问题吗？我是一个新的编码和它花了我整个晚上试图找到如何做到这一点！不客气，你没有任何问题。您应该添加此规则，但它是如何工作的，你应该在你的包装上使用
悬停
，你想让悬停效果发生，你的代码中的是
。时尚流行的小部件：悬停
，然后写下你的目标，你的代码中的是
。元文本h3 a
，但是你需要覆盖颜色，因为它需要花费时间，然后你应该使用
重要的
。
.stylish-popular-widget .meta-text {
    background: rgba(0,0,0,.3);
    bottom: 0;
    top: 65%; /*adjust BG start position*/
    left: 0;
    right: 0;
    position: absolute;
    text-align: left;
    padding-left: 10px;
    moz-transition: 1s;
    ms-transition: 1s;
    o-transition: 1s;
    transition: 1s;
    webkit-transition: 1s;
    color: #fff;
}

.stylish-popular-widget .meta-text h3 a {
    font-size: 25px;
    letter-spacing: 1px;
    color: inherit;  
}


.stylish-popular-widget:hover > .meta-text {
    background: rgba(255,255,255,.8);       
    top: 0;
    color: black;
}