Question

我正在使用WordPress插件创建以下输出：

<li>
  <a href="/permalink1/" class="wp_rp_thumbnail"><img src="/media/image-thumbnail.png"/></a>
  <a href="/permalink1/" class="wp_rp_title">Post Title</a>
</li>

我为图片和文字都应用了a:hover样式。但是当然它们是彼此分开触发的，因为生成了两个链接。我希望在悬停时触发它们（在我的情况下：图像边框颜色变化和文本颜色变化 - 无论这两个元素中的哪一个被悬停）。

当然我可以调整插件源并改变它在那里的构建方式，但由于更新能力，我认为用几行jQuery更改它会更干净。不幸的是，我不知道如何处理这个问题并且会感谢你的想法！

Answer 1

将悬停添加到li

上

<强> FIDDLE

li:hover img
{
    border: 2px solid green;
}
li:hover a
{
    color: orange;
}

Answer 2

使用Jquery，您可以使用悬停功能。像这样的东西

$('.wp_rp_thumbnail, .wp_rp_title').hover(function(){
    $('.wp_rp_thumbnail img').css({"border":"1px solid #fff"});
    $('.wp_rp_title').css({"color":"#fff"});
});

展开图像和文本之间的链接（a）

2 个答案: