【发布时间】：2016-03-27 10:33:31
【问题描述】：
我正在尝试使过渡效果在框悬停时同时适用于文本和背景，但到目前为止我的结果是两个单独的效果。当我将框悬停时，bg 上的转换工作正常，但文本的效果只有在我悬停文本本身时才会发生。 我想在整个框中悬停时应用颜色更改，而不必也悬停文本。 我需要将 bG 颜色从黑色变为白色，并将标题从白色变为黑色！
我的 CSS 是
.stylish-popular-widget
{
height: 150px;
position: relative;
width: 100%;
}
.stylish-popular-widget img
{
height: 150px;
max-width: 100%;
}
.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;
}
}
.stylish-popular-widget .meta-text h3
{
color: #FF0000 !important;
}
.stylish-popular-widget .meta-text h3 a
{
color: #fff !important;
font-size: 25px;
letter-spacing: 1px;
}
.stylish-popular-widget .meta-text h3 a:hover
{
text-decoration: none;
color: #000 !important;
}
.stylish-popular-widget .meta-text h3 :hover
{
text-decoration: none;
color: #000 !important;
}
.stylish-popular-widget .meta-text span.date
{
color: rgba(59,59,59,1);
font-size: 11px;
letter-spacing: 1px;
padding-top: 30px;
}
.stylish-popular-widget:hover > .meta-text
{
background: rgba(255,255,255,.8);
top:inherit;
top: 0;
} <?php ?>
<div class="stylish-popular-widget">
<a href="<?php echo get_permalink() ?>" rel="bookmark"><?php the_post_thumbnail('popular_posts_img'); ?>
<div class="meta-text">
<h3><a href="<?php echo get_permalink() ?>">
TEST</h3>
<span class="date">thstrhsthths</span></a>
</div>
</a>
</div>
<?php
【问题讨论】：
-
如果你通过 jsfiddle 或 codepen 给出一个在线示例会更容易。无论如何，您需要将
:hover更改为在包装块元素上而不是在锚 (a) 标记上，或者您可以通过将display: block添加到锚来将锚更改为块元素，然后你可以给它尺寸。 -
非常感谢您的回答！我是编码新手，对于我的所有问题和错误，我深表歉意......你能给我举个例子来实现一些解决方案吗？
-
我希望这会有所帮助：jsfiddle.net/msyLj79n 这只是一个例子，但有很多不同的方法可以做到这一点。
-
感谢 Narxx 我解决了这个问题 :))
-
是的，我明白了。这是我给您的第一个建议：“您需要将 :hover 更改为在包装块元素上而不是在锚点上”。这正是你所做的:-)
标签： css transition