Question

我有一个带有图像的div和一个人们可以点击的小收藏夹按钮，但我希望它只显示在{div}上:hover。我该怎么做？

结构是这样的：

<a href="">
  <li class="mainpage">
    <article class="item mainpage">
      <div class="image">
        <div class="favorites-button" style="display: none;"><span class="icon-fav"></span></div>
      </div>
    </article>
  </li>
</a>

所以基本上，当有人在:hover上<article class="item mainpage">时，<div class="favorites-button">应显示。

Answer 1

这是一个纯CSS解决方案。首先，您要从“收藏夹”按钮中删除样式属性，因为这将覆盖所应用的任何CSS。

<a href="">
    <li class="mainpage">
        <article class="item mainpage">
            <div class="image">
                <div class="favorites-button"><span class="icon-fav"></span></div>
            </div>
        </article>
    </li>
</a>

然后在你的CSS中默认隐藏收藏夹按钮，但是当它是像这样的悬停父元素的子元素时显示它...

.favourites-button {
    display: none;
}

.item.mainpage:hover .favourites-button {
    display: block;
}

希望有所帮助丹

只有在div中显示div内的div：hover？

1 个答案: