悬停时的颜色叠加

Question

我在博客上玩自己开发的主题。我有一个图像网格，可以点击进入特定类别。

我在尝试在图像上创建悬停效果时遇到问题。我想可能是因为我使用链接的方式（绝对定位它，并将其设置为 100% 高度）。

如何使用此设置进行以下操作：

1. 在悬停时添加颜色覆盖（简单的 a.entry-link:hover 不起作用）
2. 在悬停时为图像添加缩放效果

任何帮助将不胜感激。

提前致谢。

<div class="post-list">

    <div id="articles">
        ::before
        <article>
            <div class="entry-thumbnail">
                <img src="http://localhost:8888/defylife/assets/images/posts/piste_temp.jpg"></img>
            </div>
            <!--

             entry header 

            -->
            <div class="entry-header">
                <h2>

                    Morocco 2015

                </h2>
            </div>
            <a class="entry-link" title="View all posts in " href="http://localhost:8888/defylife/category/adventures/morocco/"></a>
        </article>
        <article>
            <div class="entry-thumbnail">
                <img src="http://localhost:8888/defylife/assets/images/posts/gpz_romania_thumb.jpg"></img>
            </div>
            <!--

             entry header 

            -->
            <div class="entry-header">
                <h2>

                    Norwich - Mamaia

                </h2>
            </div>
            <a class="entry-link" title="View all posts in " href="http://localhost:8888/defylife/category/adventures/norwich-mamaia/"></a>
        </article>
        <article>
            <div class="entry-thumbnail">
                <img src="http://localhost:8888/defylife/assets/images/posts/P6070238.jpg"></img>
            </div>
            <!--

             entry header 

            -->
            <div class="entry-header">
                <h2>

                    Norwich - Split

                </h2>
            </div>
            <a class="entry-link" title="View all posts in " href="http://localhost:8888/defylife/category/adventures/norwich-split/"></a>
        </article>
        <article>
            <div class="entry-thumbnail"></div>
            <!--

             entry header 

            -->
            <div class="entry-header"></div>
            <a class="entry-link" title="View all posts in " href="http://localhost:8888/defylife/category/adventures/spain/"></a>
        </article>    
    </div>

还有 CSS：

body.category .post-list #articles {
    width: 100%;
    padding: 0px;
    display: table;
    margin: 0px;
}

body.category .post-list #articles article .entry-thumbnail {
    display: block;
    width: 100%;
    max-height: 431px;
    overflow: hidden;
    margin: auto;
}

body.category .post-list #articles article .entry-thumbnail img {
    width: 100%;
}

body.category .post-list #articles article {
    display: inline;
    width: 33.3333%;
    margin: -6px 0px 0px; /* this is due to a small gap between rows */
    position: relative;
    float: left;
    text-align: center;
}

body.category .post-list #articles article .entry-header {
    z-index: 100;
    position: absolute;
    color: #FFF;
    font-size: 24px;
    font-weight: bold;
    left: 0px;
    right: 0px;
    bottom: 5px; /* this is because for some reason there are gaps between rows */
    background: rgba(0, 0, 0, 0.25) none repeat scroll 0px 0px;
    padding: 15px;
}

body.category .post-list #articles article .entry-header h2 {
    font-size: 0.85em;
    text-transform: uppercase;
}

body.category .post-list #articles article .entry-link {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    border-bottom: 0px none;
    height: 100%;
    z-index: 100;
    opacity: 0;
}

Answer 1

1. 您的 <a> 标签不包含您要更改的任何元素，因此悬停不会影响它们（<img> 和 <h2> 中的文本都存在于父 @987654324 @标签——你可能想把:hover放在文章标签上，并改变内部元素（即article:hover div.entry-header { background: rgba(0,0,0,0.5); }）

2. 至于缩放 - 与1相同，您可以通过父元素的悬停来更改宽度/高度。不要忘记，如果您想获得“缩放”效果，您可能还需要更改位置（左侧和顶部）。

下次请在此处提供代码，而不是作为链接。它会更容易提供帮助，并且将来也会提供。