Question

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

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

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

在悬停时添加颜色叠加（简单的a.entry-link：悬停不起作用）
在悬停时为图像添加缩放效果

非常感谢任何帮助。

提前致谢。

<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

您的<a>代码不包含您要更改的任何元素，因此悬停不会影响它们（<img>和<h2>中的文字存在于父<article>标记中 - 您可能希望将:hover放在文章标记上，并更改内部元素（即article:hover div.entry-header { background: rgba(0,0,0,0.5); }）
对于缩放 - 与1相同，您可以使用父元素的悬停来更改宽度/高度。不要忘记，如果你想要“缩放”效果，你可能还想改变位置（左和上）。

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

悬停时的颜色叠加

1 个答案: