仅当它是 :hover 时才在 div 中显示 div？ [复制]答案

【问题标题】：show a div inside a div only if it is :hover? [duplicate]仅当它是 :hover 时才在 div 中显示 div？ [复制]
【发布时间】：2015-05-13 19:00:10
【问题描述】：

我有一个带有图像的 div 和一个人们可以点击的小收藏按钮，但我希望它仅在他们 :hover 超过 div 时显示。我该怎么做？

结构是这样的：

<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>

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

【问题讨论】：

.mainpage:hover .favorites-button { display: block; } 真正简单的搜索就会给你答案。

标签： css

【解决方案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;
}

希望有所帮助丹

【讨论】：